css - 将搜索按钮添加到文本输入

问题描述

我是 CSS 新手，今天我想将搜索按钮添加到我的navbar textbox,

所以我尝试这样的事情：

*{
    box-sizing: border-box;
}
body{
    font-family: 'Montserrat', sans-serif;
    margin:0px;
}

.section-title{
    color: #2ddf5c;
    }


.main-header{
display: flex;
align-items: center;
justify-content: space-evenly;
width:100%;
background: #2ddf5c;
padding: 16px;
}

.main-header > div{
    vertical-align: middle;
}

.main-header__brand{
color: #0e4f1f;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}

.main-nav__searchbar_container {
  display: flex;
  width: 100%;
  padding-left: 40px;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
}

.main-nav__searchbar_container input.main-nav__searchbar{
    width:100%;
    height: 50px;
  /* background: #2b303b; */
  border: none;
  font-size: 10pt;
  float: left;
  /* color: #fff; */
  padding-left: 15px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.main-nav__searchbar_container input.main-nav__searchbar::-webkit-input-placeholder{
    color: #65737e;
}

.main-nav__searchbar_container input.main-nav__searchbar:-moz-placeholder{ /*Frefox 18 */
    color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar::-moz-placeholder{/*Frefox 19 */
    color: #65737e;
}
.main-nav__searchbar_container input.main-nav__searchbar:-ms-input-placeholder{
    color: #65737e;
}
.main-nav__searchbar_container button.icon{
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: none;
    background: #232833;
    height: 50px;
    width: 50px;
    color: #4f5b66;
    opacity: 0;
    font-size: 10pt;
    -webkit-transition: all .55s ease;
    -moz-transition: all .55s ease;
    -ms-transition: all .55s ease;
    -o-transition: all .55s ease;
    transition: all .55s ease;
  }

  .main-nav__searchbar_container:hover button.icon, 
  .main-nav__searchbar_container:active button.icon, 
  .main-nav__searchbar_container:focus button.icon{
      outline: none;
      opacity: 1;
      margin-left: -50px;
  }

.main-nav__searchbar_container:hover button.icon:hover{
    background: red;
}
.main-nav__searchbar{
    display: flex;
    width: 100%;
    margin: 8px;
    padding: 8px;
    border: 2px solid;
    border-radius: 4px;
    outline: none;
    transition: .3s;
}

.main-nav{
  display: flex;
  width: 100%;
  text-align: right;
  margin: 0 10px;
}

.main-nav__items{
display: flex;
margin:8px;
padding:8px;
list-style: none;
}
.main-nav__item{
    display: inline-block;
}

.main-nav__social{
    display:block;
    width: 20px;
    height: 20px;
    margin-left: 10px;
}


.another-container{
margin:auto;
width: 100%;
padding: 10px;
}

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>CSS course</title>
        <link rel="shortcut icon" href="favicon.png">
        <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:400,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
 <header class="main-header">
            <div>
                <a href="index.html" class="main-header__brand">
                    uHost
                </a></div><nav class="main-nav">
                <div class="another-container">
                    <div class=main-nav__searchbar_container><input type="text" placeholder="Search" class="main-nav__searchbar">
                    <button class="icon"><i class="fas fa-search" aria-hidden="true"></i></button>
                    </div>
                    </div>
                <ul class="main-nav__items">
                    <li class="main-nav__item"> 
                        <img class="main-nav__social" src="navbar-icons/social-media__icons/facebook.svg" alt="facebook">
                    </li>
                    <li class="main-nav__item">
                        <img class="main-nav__social" src="navbar-icons/social-media__icons/instagram-bosquejado.svg" alt="instagram">
                    </li>  
                </ul>
            </nav>
        </header>
        </body>

因此，当您将鼠标悬停在textbox. 问题是我的按钮元素，textbox即使它们在同一个容器中，它也没有与我对齐，我做错了什么？

我要添加的另一件事是为textbox悬停动作的边框着色，使其成为设计的一部分，并给人textbox一种活跃的印象，如下所示：

我尝试border-color: #232833;在悬停 css 规则中使用，但这不起作用，

问候

- -更新 - -

我尝试将所有内容包装到一个新容器中，如下评论：

  .another-container
       {
          margin:auto;
          width: 100%;
          padding: 10px;
       }

但结果是一样的。

标签： css

css - 将搜索按钮添加到文本输入

问题描述

解决方案

推荐阅读