html怎么在文本框中加图,HTML在透明输入框里添加图标的实现代码

最近在写一个律师推荐前台的网站，在上面搜索框这里出现了问题，我想把搜索的图标放在搜索框里面，但是弄了半天都不大如意……

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

基本思路

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

我们最直接上代码：

HTML：

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在透明输入框里添加图标的实现代码的文章就介绍到这了,更多相关html 透明输入框图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

html怎么在文本框中加图,HTML在透明输入框里添加图标的实现代码相关推荐

html获取文本框中的文字,JavaScript实现input输入框点击获取文字内容
Js实现INPUT输入框,当鼠标点击文字时自动获取文字内容,并显示在文本框中,一个惯用的表单技巧,有时可省去一些用户输入的麻烦,可有效提升用户体验. input输入框获取js点击文字内容 .c{ wi ...
Html中文本域中加图片,如何在文本框中加图片
2007-06-21 怎么添加留言板.最新文章列表.最新评论.最新留言--的这些字背后的背景图片?我按照这些添加都不能成功,图片地址也是网络上的,也加了空格键:更换页面留言板标题栏下翻时的图片的源代码 ...
html文本框中加提示,如何使HTML文本框为空时显示提示？
您可以使用HTML中的属性设置占位符(浏览器支持).该和可以用CSS改变(虽然浏览器的支持是有限的).placeholderfont-stylecolor input[type=search]::-w ...
excel 查找图相框或文本框中的内容
在excel中经常遇到有用户使用图相框或者文本框来输入内容,使excel看上去更加美观,但是如果我们想查找的文字内容在文本框或者图相框中,那么正常的ctrl+F的查找功能就不能正常索搜到这些文字. 需 ...
php文本框长度限制,php截取富文本框中的固定长度的字符
ai,哎怎么赶脚自己写东西越来越小儿科了呢,现在连这个问题都找了好半天因为后台是的内容是富文本编辑器编辑的,前台我傻逼的直接截取了字符串,然后样式啥的都乱了,找了半天是因为富文本的问题其实解决办法 ...
javascript 获取光标所选中的内容并插入到另一个文本框中(兼容ie和ff）
项目中正好用到做下笔记方便以后查找 ie获取光标的位置使用document.selection.createRange() 火狐下使用document.getElementById(id).sele ...
使用JavaScript在文本框中的Enter键上触发按钮单击
我有一个文本输入和一个按钮(见下文). 当在文本框中按下Enter键时,如何使用JavaScript 触发按钮的click事件 ? 当前页面上已经有一个不同的"提交"按钮,因此我不 ...
在输入文本框中获取值
使用jQuery获取和呈现输入值的方法有哪些? 这是一个: <script type="text/javascript" src="http://code.jque ...
java word文本框_Java 读取Word文本框中的文本、图片、表格
Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...

html怎么在文本框中加图,HTML在透明输入框里添加图标的实现代码

html怎么在文本框中加图,HTML在透明输入框里添加图标的实现代码相关推荐

最新文章

热门文章