HTML在全透明键入框里加上标志的完成编码

近期在写1个律师强烈推荐前台接待的网站,在上面检索框这里出現了难题,我想把检索的标志放在检索框里边,可是弄了半天都不大吉祥如意……

话很少说,大家立即进到主题 :

基础思路

实际上就把键入框与后边的标志1起放在1个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(),最终1个特性便是全透明度(在0⑴之间 )

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在全透明键入框里加上标志的完成编码的文章内容就详细介绍到这了,更多有关html 全透明键入框标志內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!