问题:

   根据需要,给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. ASP.NET MVC随想录——漫谈OWIN

    什么是OWIN OWIN是Open Web Server Interface for .NET的首字母缩写,他的定义如下: OWIN在.NET Web Servers与Web Application之 ...

  2. UISearchController使用

    iOS8之前我们使用UISearchDisplayController做TableView的本地搜索 iOS8提供实现搜索功能的SDK:UISearchController(iOS8.0之后).UIS ...

  3. 在VFP6中模拟CursorAdapter的功能

    这个是我在2002年做的一个VFP程序中实现的方法, 现在看来功能和VFP8,9中的CursorAdapter非常相似, 因为属性设置有许多相同的地方,我甚至怀疑CA就是就是在这样的基础上再包装出来的 ...

  4. Oracle行转列、列转行的Sql语句总结(转)

    多行转字符串 这个比较简单,用||或concat函数可以实现 select concat(id,username) str from app_userselect id||username str f ...

  5. C++中动态内粗分配new标识符的使用

    new是C++中内建的操作符,具体用法见下面详解: (1)new用法一:基本数据类型的内存动态分配 int *p; p=new int(10): 在这个例子中首先定义个一个指向整型类型的指针,紧接着用 ...

  6. 【Java EE 学习 25 下】【网上图书商城js小技术点总结】

    1.日历控件的使用 日历控件源代码: /** * add auto hide when mouse moveout * * @version 1.0.1 * @date 2010-11-23 * @a ...

  7. VS2012无法打开文件“kernel32.lib”问题的解决办法

    后来经过百度搜索发现解决办法: 1.在项目属性[VC++目录]下的 [包含目录] 添加 $(WindowsSDK_IncludePath) ,在[库目录]添加$(WindowsSDK_LibraryP ...

  8. Android Studio 之 no render target selected

    今天第一次使用android studio, 莫名其妙出现 no render target selected的错误,没有设计界面, 各种百度之后在 stackoverflow.com/questio ...

  9. Linux 查杀病毒的常见命令

    1. 查看异常连接的网络端口及其对应的相应的进程 netstat -anlp | grep EST 2.看下相关的进程ID对应的可执行文件的位置 ps 2393 可以看到进程的可执行文件在哪? 3.临 ...

  10. Leetcode Edit Distance

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...