入力ボックスに検索ボタンを挿入するには

Question

私が達成しようとしているのは、入力の最後に円形の検索ボタンを追加することですが、どういうわけか、そのようにする方法のロジックが得られません。私はアイコンを表示するフォントとしてフォントAwesomeを使用しています。

.search-box { 
 
    outline: none; 
 
    padding: 7px; 
 
    padding-left: 10px; 
 
    padding-right: 40px; 
 
    height: 35px; 
 
    width: 100%; 
 
    border-radius: 30px; 
 
    font-size: 15px; 
 
    border-color: transparent; 
 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
 
    box-sizing: border-box; /* Opera/IE 8+ */ 
 
}

<input type="text" class="search-box" placeholder="Search For a Product..">

Answer 1

あなたは<input>内<button>（または任意の他の要素）を配置することはできません。しかし、入力のように見える要素を含めることによって、あなたはそれを「偽造」することができます。必要なCSSスタイルを使用してボタンを入力の右側に配置すると、丸みを帯びて見えるようになります。私はこのコードは、テキストボックス内のボタンを作成するためのあなたのアイデアであなたを助けることを願っています

.search-container { 
 
    background-color: #FFF; 
 
    position: relative; 
 
    border-radius: 30px; 
 
    padding: 3px 50px 3px 10px; 
 
} 
 
.search-box { 
 
    background-color: transparent; 
 
    outline: none; 
 
    height: 35px; 
 
    font-size: 15px; 
 
    border: 0; 
 
    width: 100%; 
 
} 
 
.search-button { 
 
    position: absolute; 
 
    right: 4px; 
 
    top: 4px; 
 
    background-color: #C00; 
 
    border-radius: 50%; 
 
    border: 0; 
 
    color: #FFF; 
 
    width: 35px; 
 
    height: 35px; 
 
    outline: 0; 
 
} 
 

 
body { 
 
    background: #CCC; 
 
}

<br /><br /><br /> 
 

 
<div class="search-container"> 
 
    <input type="text" class="search-box" placeholder="Search For a Product.."> 
 
    <button class="search-button">Go</button> 
 
</div>

Answer 2

：これを試してみてください。

/*Clearing Floats*/ 
 
.cf:before, 
 
.cf:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 

 
.cf:after { 
 
    clear: both; 
 
} 
 

 
.cf { 
 
    zoom: 1; 
 
} 
 

 

 
/* Form wrapper styling */ 
 
.form-wrapper { 
 
    width: 450px; 
 
    padding: 15px; 
 
    margin: 150px auto 50px auto; 
 
    background: #444; 
 
    background: rgba(0, 0, 0, .2); 
 
    border-radius: 10px; 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2); 
 
} 
 

 

 
/* Form text input */ 
 

 
.form-wrapper input { 
 
    width: 330px; 
 
    height: 20px; 
 
    padding: 10px 5px; 
 
    float: left; 
 
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
 
    border: 0; 
 
    background: #eee; 
 
    border-radius: 3px 0 0 3px; 
 
} 
 

 
.form-wrapper input:focus { 
 
    outline: 0; 
 
    background: #fff; 
 
    box-shadow: 0 0 2px rgba(0, 0, 0, .8) inset; 
 
} 
 

 
.form-wrapper input::-webkit-input-placeholder { 
 
    color: #999; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 

 
.form-wrapper input:-moz-placeholder { 
 
    color: #999; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 

 
.form-wrapper input:-ms-input-placeholder { 
 
    color: #999; 
 
    font-weight: normal; 
 
    font-style: italic; 
 
} 
 

 

 
/* Form submit button */ 
 

 
.form-wrapper button { 
 
    overflow: visible; 
 
    position: relative; 
 
    float: right; 
 
    border: 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
    height: 40px; 
 
    width: 110px; 
 
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    background: #d83c3c; 
 
    border-radius: 0 3px 3px 0; 
 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); 
 
} 
 

 
.form-wrapper button:hover { 
 
    background: #e54040; 
 
} 
 

 
.form-wrapper button:active, 
 
.form-wrapper button:focus { 
 
    background: #c42f2f; 
 
    outline: 0; 
 
} 
 

 
.form-wrapper button:before { 
 
    /* left arrow */ 
 
    content: ''; 
 
    position: absolute; 
 
    border-width: 8px 8px 8px 0; 
 
    border-style: solid solid solid none; 
 
    border-color: transparent #d83c3c transparent; 
 
    top: 12px; 
 
    left: -6px; 
 
} 
 

 
.form-wrapper button:hover:before { 
 
    border-right-color: #e54040; 
 
} 
 

 
.form-wrapper button:focus:before, 
 
.form-wrapper button:active:before { 
 
    border-right-color: #c42f2f; 
 
} 
 

 
.form-wrapper button::-moz-focus-inner { 
 
    /* remove extra button spacing for Mozilla Firefox */ 
 
    border: 0; 
 
    padding: 0; 
 
}

<form class="form-wrapper cf"> 
 
    <input type="text" class="search-box" placeholder="Search For a Product.."> 
 
    <button type="submit">Search</button> 
 
</form>

Fiddle

Source

Answer 3

この方法を試してください。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <title> Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet" href="css/font-awesome.min.css"> 
    <link rel="stylesheet" href="css/font-awesome-animation.min.css"> 
    <script src="js/jquery.min.js"></script> 
    <script src="js/bootstrap.min.js"></script> 
    <style type="text/css"> 
     .search-box { 
     outline: none; 
     padding: 7px; 
     padding-left: 10px; 
     padding-right: 40px; 
     height: 35px; 
     width: 90%; 
     border-radius: 30px; 
     font-size: 15px; 
     border-color: transparent; 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box; /* Opera/IE 8+ */ 
     } 

     #filtersubmit { 
     position: relative; 
     z-index: 1; 
     left: -25px; 
     top: 1px; 
     color: black; 
     cursor:pointer; 
     width: 0; 
     } 
    </style> 
    </head> 
    <body> 
    <br><br> 
    <div class="container"> 
     <input type="text" class="search-box" placeholder="Search For a Product.."> 
     <i id="filtersubmit" class="fa fa-search"></i> 
    </div> 
    </body> 
</html> 

それがお役に立てば幸いです。