问题:

　　 根据需要,给input添加背景图片,又需要点击input及input的这个背景触发事件,但是给input输入内容多时,会覆盖此背景(如下图),

　　 图中,java人员使用插件省市区三级联动,需要input, 同时还要给input做三角下拉按钮背景(整个截取如德邦,或只截取至右),但是当地

　　 名长的时候,会覆盖这个背景.

解决:(很简单却没想起来)

　　 给input做padding-right:24px;即可解决.

　　

注意:

　　input的文本内容自带左右翻看

　　 input select 等好像z-index比较高

欢迎指正

给inpu加背景图,input内容又不能盖着背景图的更多相关文章

  1. 去除input默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小

    有时候需要用input元素中type属性值为number时,会出现默认的上下按钮, 去掉input默认的上下按钮:兼容性写法如下 input[type='number']::-webkit-outer ...

  2. css 背景透明文字(内容)不透明三种实现方法

    好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...

  3. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  4. phpcms_v9 多图字段 内容页，首页，分页自定义字段调用

    phpcms_v9 多图字段 内容页,首页,分页自定义字段调用 说明:自定义多图字段名 shigongtu 1 内容页调用 {loop $shigongtu $r}      <img src= ...

  5. 使用disavled属性锁定input内容不可以修改后，打印获取不到对应的值

    当我们需要锁定input内容不让修改时,可以使用disabled="disabled"和readonly="readonly", 官方的解释是:disabled ...

  6. 取消chrome浏览器下input和textarea的默认样式；html5默认input内容清除“×”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  7. bootstrap模态框modal使用remote第二次加载显示相同内容解决办法

    bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...

  8. 时时监听input内容的改变

    心得:我们都知道input有一个change事件,但是是在input元素失去焦点的时候发生,不能时时的监听input内容的改变. 刚开始的时候我是想用setInterval设置计时器的原理定时监听in ...

  9. 如何修改PDF文件内容，PDF怎么添加背景

    很多的情况下,大家都会遇到PDF文件,不管是在学习中还是在工作中,对于PDF文件,文件的修改编辑是需要用到PDF编辑软件的,在编辑文件的时候,发现文件的页面是有背景颜色的,又该如何修改背景颜色呢,不会 ...

随机推荐

  1. HDU 5102 The K-th Distance（模拟）

    题意:输入一棵树,输出前k小的点对最短距离dis(i,j)的和. 模拟,官方题解说得很清楚了.不重复了. http://bestcoder.hdu.edu.cn/ 需要注意的是,复杂度要O(n+k), ...

  2. CAEmitterLayer实现雪花效果

    CAEmitterLayer 简介 在iOS5.0中,Apple引入了CAEmitterLayer层,CAEmitterLayer是一个高性能的粒子效果引擎,被用来创建实时粒子动画,如:烟雾,火,雨等 ...

  3. JS Date

    JS获取当前日期时间 var myDate = new Date();myDate.getFullYear();    //获取完整的年份(4位,1970-????)myDate.getMonth() ...

  4. MySql增加字段、删除字段、修改字段名称、修改字段类型

    1.增加一个字段 alter table user add COLUMN new1 VARCHAR(20) DEFAULT NULL; //增加一个字段,默认为空 alter table user a ...

  5. apache自带的web监控器配置

    第一:将mod_status模块放开,即去掉httpd.conf中的# 第二:在httpd.conf后面添加下面内容 <Location /server-status> SetHandle ...

  6. 【Java EE 学习 22 下】【单线程下载】【单线程断点下载】【多线程下载】

    一.文件下载简述 1.使用浏览器从网页上下载文件,Servlet需要增加一些响应头信息 (1)response.setContentType("application/force-downl ...

  7. 利用Jquery获取、设置iframe中元素

    <iframe id="iframe" src="'+url+'"></iframe>'; //iframe加载完成后 $(" ...

  8. 如何持续集成/交付一个开源.NET函数库到Nuget.org

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:这是一个简单的入门向导,涉及到GitHub.AppVeyor和Nuget.org. 最 ...

  9. Quick Apps for Sharepoint小型BI解决方案

    Quick Apps for Sharepoint介绍 Quick Apps for Sharepoint前身是Quest Webpart ,由企业软件开发商QuestSoftware开发,Quest ...

  10. Spring Autowired 注入失败总是Null

    报错:NullPointerException 分析:错误原因是注入失败? <context:annotation-config/> <context:component-scan ...