如何在input中添加button

我正在努力实现这一点：

我想要蓝色箭头作为一个buttonhover和onclick触发器; 这可能吗？？

Answer 1

该button不在input内部。 这里：

input[type="text"] { width: 200px; height: 20px; padding-right: 50px; } input[type="submit"] { margin-left: -50px; height: 20px; width: 50px; } 

例如： http : //jsfiddle.net/s5GVh/

Answer 2

我为你find了一个很好的代码：

HTML

 <form class="form-wrapper cf"> <input type="text" placeholder="Search here..." required> <button type="submit">Search</button> </form> 

CSS

 /*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; } 

演示： 小提琴来源： Speckyboy

Answer 3

 .flexContainer { display: flex; } .inputField { flex: 1; } 

 <div class="flexContainer"> <input type="password" class="inputField"> <button type="submit"><img src="arrow.png" alt="Arrow Icon"></button> </div> 

Answer 4

使用flexbox，并将边框放在窗体上。

现在（2017年）做到这一点的最佳方法是使用Flexbox。

• 将边框放在包含元素上（在这种情况下，我使用了表单，但是可以使用div）。
• 使用flexbox布局排列input和button。 允许input扩展以占用所有可用空间。
• 现在通过删除其边框来隐藏input。

运行下面的代码片段，看看你得到了什么。

 form { /* This bit sets up the horizontal layout */ display:flex; flex-direction:row; /* This bit draws the box around it */ border:1px solid grey; padding:2px; } input { /* Tell the input to use all the available space */ flex-grow:2; /* And hide the input's outline, so the form looks like the outline */ border:none; } button { /* Just a little styling to make it pretty */ border:1px solid blue; background:blue; color:white; } 

 <form> <input /> <button>Go</button> </form> 

Answer 5

您可以使用CSS background:url(ur_img.png)在input框中插入图像，但是为了创build点击事件，您需要合并您的箭头图像和input框。

Answer 6

hover试试这个：

 input[type="submit"]:hover { background:black; } 

对于点击状态：

 input[type="submit"]:active { background:orange; }