文本框里如何带上图标和文字提示

相信我们平时开发的过程中，会遇到这种需求：

这里是一个输入框，里面有提示文字的同时，还有一个小图标。这里我的做法是使用一个父元素包裹住文本框，利用父级元素的背景图片来完成小图标的实现。提示文字部分则使用文本框的placeholder来解决。

参考代码如下：

HTML部分：

<div class="search-input"><input type="text" placeholder="写下备注">
</div>

CSS部分：

.search-input {width: 718px;margin: 41px auto 0;}.search-input textarea {width: 718px;height: 148px;border: 1px solid #CCCCCC;border-radius: 100px;font-size: 18px;color: #333;line-height: 48px;text-indent: 48px;letter-spacing: -0.43px;outline: none;background: #FFFFFF url("../../icons/问题.svg") no-repeat 17px center;}

这里还有一个重要的地方就是对提示文字大小，字体，颜色，缩进程度的设置，这里需要使用到的CSS样式为：（注意兼容）

::-webkit-input-placeholder { /* WebKit browsers */font-size: 18px;color: #CCCCCC;text-indent: 48px;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */font-size: 18px;color: #CCCCCC;text-indent: 48px;}::-moz-placeholder { /* Mozilla Firefox 19+ */font-size: 18px;color: #CCCCCC;text-indent: 48px;}:-ms-input-placeholder { /* Internet Explorer 10+ */font-size: 18px;color: #CCCCCC;text-indent: 48px;}

文本框里如何带上图标和文字提示相关推荐

input 文本框里的放字体图标的方法
input 文本框里的放字体图标的方法 input文本框没有:after和:before这连个伪类,所以就用label标签将他包起来,给label:after或者:before,还有就是我们要给inp ...
[实用文档]将PPT中所有文本框里的文字提取出来
将PPT中所有文本框里的文字提取出来打开PPT,按ALT+F11打开VBA编辑器,在左面的工程视图里点击右键,选择插入->模块,添加一个模块,名字都不用改. 然后点击顶部的"工具&q ...
Python将PPT中所有文本框里的文字提取出来
Python将PPT中所有文本框里的文字提取出来我用了正则表达式,理论上用用可以解析xml格式的都可以,如Beautiful,pandas等. 直接上代码 import os import re s ...
c# winform 设置winform进入窗口后在文本框里的默认焦点
http://www.cnblogs.com/JuneZhang/archive/2011/04/19/2020585.html 进入窗口后默认聚焦到某个文本框,两种方法: ①设置tabindex 把 ...
利用Excel查找替换Word文本框里的内容
利用Excel查找替换Word文本框里的内容一般情况下,利用Excel的Vba直接查找是忽略查找Word文本框里内容的,使用以下子程序,可以实现这一功能. Sub ReplaceInTextBox( ...
html5文本框里插图片文字,word应用教程：在文本框内插入图片
在使用word编辑电子文档时,可以通过插入功能插入图片,那么怎样才能在wps文字文档从插入可以任意移动的图片呢,那么下面就由学习啦小编给大家分享下word在文本框内插入图片的技巧,希望能帮助到您. w ...
pyqt5获取文本框里输入的值_实战PyQt5: 060-输入对话框QInputDialog
QInputDialog简介在GUI应用中,经常有一些简单的输入信息需要交互,这时候可以使用QInputDialog来快速完成我们的工作,而不必创建一个新的对话框来实现. QInputDialog控 ...
java设置文本框里字体颜色_swing设置字体颜色
());//设置该容器的布局 container.setBackground(Color.red);//设置字体对话框颜色 testLabel = new JLabel("作者:张旭&quo ...
python获取文本框里输入的值_如何从Tkinter文本框小工具获取输入？
要从python 3中的文本框中获取Tkinter输入,我使用的完整学生级程序如下: #Imports all (*) classes, #atributes, and methods of tkin ...

文本框里如何带上图标和文字提示

文本框里如何带上图标和文字提示相关推荐

最新文章

热门文章