其实很简单，只需要html和css就可以搞定啦

首先：<input class="layui-input" id="test1" placeholder="yyyy-MM-dd" type="text" >

写好input标签后就看css大显身手了

#test1{
background-image: url(icon/calendar.png);/*设置小图标为背景*/
background-size:18px 18px;/*设置小图标的 大小*/
background-position: 130px 0px;/*设置小图标的位置*/
background-repeat:no-repeat ;/*设置小图标不重复*/
border: 1px solid gray;
}

然后打开页面就可以看到想要的效果啦!

关于input输入框内设置小图标的问题的更多相关文章

  1. 清除表单input输入框内数据

    清除表单input输入框内数据 1. $(':input','#addVoucherType') //'#addVoucherType'表单id .not(':button') .val('') .r ...

  2. 在CS代码页获取input输入框内肉----.net学习点滴

    想在后台cs页面得到前台页面aspx中html控件input输入的值.通过访问input输入框的name属性值获取. 解决方法如下: 1.用Request["user"].toSt ...

  3. input输入框type设置为number，maxlength无效

    一个小细节,以前很少注意,直到最近做的一个项目,当我把一个输入数字的input框的类型设置为number时,input框还是可以无限输入,设置maxlengh=10就不起作用了.然后我就去百度了一下, ...

  4. input 输入框背景色设置为透明

  5. js应用中的小细节-时间戳的转换和input输入框有效数字

    1 input输入框内value值保留有效数字,js自带的方法.toFixed(),但是直接使用会报错,因为不论输入框内输入汉字.字母还是数字,类型都是string.解决的办法是将其转换为number ...

  6. css：自己实现一个带小图标的input输入框

    有小图标的input输入框<input type="text" placeholder="输入手机号" style="background:ur ...

  7. 内联/块级元素的宽高及margin/padding的说明 |||||| 为何img、input等内联元素可以设置宽、高

    1,内联非替换元素设置宽高是无效的,设置margin时,左右有效,上下无效.设置padding时,左右有效,而上下padding比较奇葩,内联非替换元素的上下padding会在元素内容盒不动的情况下上 ...

  8. input、textarea等输入框输入中文时，拼音在输入框内会触发input事件的问题

    监听文本输入框的input事件,在拼写汉字(输入法)但汉字并未实际填充到文本框中(选词)时会触发input事件,如图: 但是在很多情况下,只需要输入到输入框的中文字符. 解决办法: 通过查阅资料得知在 ...

  9. Css——设置input输入框光标颜色

    在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况.谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢? 上面描述的情景有两种实现方式 ...

随机推荐

  1. [Database.System.Concepts(6th.Edition.2010)].Abraham.Silberschatz. Ch8学习笔记

    Database Ch8.relational design 8.1 features of good design 8.1.1 larger alternatives why design is g ...

  2. QSS独门秘籍：subcontrol

    QSS是C++ Qt中的界面美化神器,其语法和CSS区别不大,但是QSS有一个独有的功能——subcontrol,这是CSS所没有的,一个widget往往由多个子部件构成,利用subcontrol可以 ...

  3. RoR - MetaProgramming

    ruby是动态语言,它有动态语言的优势与劣势 动态语言,像python与ruby 你不用提前去定义method - they need to only be "found" whe ...

  4. 《More Accurate Question Answering on Freebase》文献笔记

    bast-2015-CIKM CIKM全称是International Conference on Information and Knowledge Management 这篇文章主要采用采用lea ...

  5. How do you explain Machine Learning and Data Mining to non Computer Science people?

    How do you explain Machine Learning and Data Mining to non Computer Science people?   Pararth Shah, ...

  6. #WEB安全基础 : HTTP协议 | 0x1 TCP/IP通信

    TCP/IP是如何通信的呢? 请看图 用TCP/IP协议族通信时,会通过分层顺序与对方进行通信.发送端从应用层往下走,接受层从链路层往上走. 客户端为了浏览界面在应用层发送请求,为了方便传输在传输层的 ...

  7. Vue系列之 => 评论功能(小知识点串联)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Java当出现未被捕获的异常应该如何处理

    在你学习在程序中处理异常之前,看一看如果你不处理它们会有什么情况发生是很有好处的.下面的小程序包括一个故意导致被零除错误的表达式.class Exc0 {    public static void ...

  9. Spring Boot 全局异常捕获

    import javax.servlet.http.HttpServletRequest; import org.springframework.web.bind.annotation.Control ...

  10. Python数据分析Numpy库方法简介(四)

    Numpy的相关概念2 副本和视图 副本:复制 三种情况属于浅copy 赋值运算 切片 视图:链接,操作数组是,返回的不是副本就是视图 c =a.view().创建a的视图/影子和切片一样都是浅cop ...