问题:

   根据需要,给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. Rest(表述性状态转移)

    本文的主要内容有: 1.了解Rest 2.了解RESTful WebService 3.使用SpringMvc实现RESTful ------------------------------我是华丽的 ...

  2. 深入Java核心 Java中多态的实现机制(1)

    在疯狂java中,多态是这样解释的: 多态:相同类型的变量,调用同一个方法时,呈现出多中不同的行为特征, 这就是多态. 加上下面的解释:(多态四小类:强制的,重载的,参数的和包含的) 同时, 还用人这 ...

  3. MySql中的字符数据类型

    MySql中的varchar类型 1.varchar类型的变化 MySQL数据库的varchar类型在4.1以下的版本中的最大长度限制为255,其数据范围可以是0~255或1~255根据不同版本数据库 ...

  4. 《C#本质论》读书笔记(16)构建自定义集合

    16.1 更多集合接口 集合类(这里指IEnumerable层次结构)实现的接口层次结构 16.1.1 IList<T>与IDictionary<TKey,TValue> 字典 ...

  5. ElasticSearch(站内搜索)

    简介 Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据.它可以用于全文搜索,结构化搜索以及分析,当然你也可以将这三者进行组合.Elasticse ...

  6. Source Insight编辑器配置

    Sublime Text 无疑是一款很优秀的编辑器和阅读器,可惜对于中文编码不支持,网上的ConvertTOUTF8存在BUG,经常转码失败,体验很不好. 现在开始使用source insight,这 ...

  7. Android onActivityResult没响应

    原因: 1.当MainActivity2的启动模式为SingleTask时, 系统为自动返回setResult(Activity.RESULT_CANCELED). 2.当为MainActivity2 ...

  8. 浏览器-10 Chromium 移动版

    移动版 chromium 的iOS版和Android是为两个流行的移动操作系统设计的, UI方面进行了 较大的重新设计; 两者从外观上看颇为相似,但是其内部的渲染引擎的差别非常的大,原因在于iOS对应 ...

  9. Android入门(十):界面的布局方式及其实际应用

    关于Android界面布局,网上已经有了很多非常不错的学习资料,在这里我也不班门弄斧了,推荐两篇我认为写的不错的教程,然后再重点讲一下几种布局方式的实际应用. 教程链接:①http://www.cnb ...

  10. 实现一个 能在O(1)时间复杂度 完成 Push、Pop、Min操作的 栈

    一,问题描述 实现一个栈(元素遵守先入后出顺序),能够通过 min 方法在 O(1)时间内获取栈中的最小元素.同时,栈的基本操作:入栈(Push).出栈(Pop),也是在O(1)时间内完成的. 二,问 ...