说米网

域名抢注这篇文章首要介绍了HTML在通明输入框里增加图标的结束代码，代码简略易懂，十分不错对我们的学习或作业具有必定的参看学习价值，需求的朋友参看下吧

最近在写一个律师引荐前台的网站，在上面查找框这儿出现了问题，我想把查找的图标放在查找框里边，可是弄了半响都不大如意……

话不多说，我们直接进入主题 ：

基本思路

其实就把输入框与后边的图标一起放在一个div里边，然后将输入框的border设置为0px，究竟设置div的border为究竟的外边框

我们最直接上代码：

HTML：

<div class=”search”>
<form action=http://baidu.com>
<input type=”text” placeholder=”请输入查找的律师或专长”>
<span>
<a href=”#”><img src=”img/icon1.png” alt=””></a>
</span>
</form>
</div>

CSS：

这儿是设置外面整个div的样式

.search {
width: 250px;
height: 35px;
border: 1px solid white;
border-radius: 30px;
}

这儿是设置里边的输入框的长宽、boder为0px、里边的字体大小、点击不会亮边框(outline:none)

设置通明度这儿运用rgba()，究竟一个属性便是通明度（在0-1之间）

input {
width: 200px;
height: 35px;
border: 0;
font-size: 14px;
outline: none;
background-color: rgba(255, 255, 255, 0);
color: white;
font-size: 16px;
margin: 0 10px;

总结

到此这篇关于HTML在通明输入框里增加图标的结束代码的文章就介绍到这了,