HTML在透明输入框里添加图标的实现代�
Admin 2022-06-17 群英技术资� 323 次浏�
最近在写一个律师推荐前台的网站,在上面搜索框这里出现了问题,我想把搜索的图标放在搜索框里面,但是弄了半天都不大如意…�
话不多说,我们直接进入主� �
基本思路
其实就把输入框与后面的图标一起放在一个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;
总结
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章给大家分享的是CSS选择器的使用,CSS中选择器主要分为:基本选择器、属性选择器、组合选择器与伪类选择器四个大类,下文介绍了他们的使用,文中的示例代码介绍得很详细,有需要的朋友可以参考,接下来就跟随小编一起学习一下吧�
这篇文章主要介绍了CSS3 @keyframes简单动画实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
这篇文章给大家分享一个用css3实现环形渐变进度条的内容,也就是给环形进度条添加渐变的效果,实现效果如下。那么这个效果具体怎样做呢?本文有实现思路及代码,接下来我们就详细来看看吧�
css中的position属性,position有四个值:absolute/relative/fixed/static(绝对/相对/固定/静�(默认))通过定位属性可以设置一些不规则的布局,使用TLBR(top,left,bottom,right)来调整元素位�
这篇文章主要介绍了深入理解CSS中的vertical-align属性和基线问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078