给inpu加背景图,input内容又不能盖着背景图
问题:
根据需要,给input添加背景图片,又需要点击input及input的这个背景触发事件,但是给input输入内容多时,会覆盖此背景(如下图),
图中,java人员使用插件省市区三级联动,需要input, 同时还要给input做三角下拉按钮背景(整个截取如德邦,或只截取至右),但是当地
名长的时候,会覆盖这个背景.

解决:(很简单却没想起来)
给input做padding-right:24px;即可解决.

注意:
input的文本内容自带左右翻看
input select 等好像z-index比较高
欢迎指正
给inpu加背景图,input内容又不能盖着背景图的更多相关文章
- 去除input默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小
有时候需要用input元素中type属性值为number时,会出现默认的上下按钮, 去掉input默认的上下按钮:兼容性写法如下 input[type='number']::-webkit-outer ...
- css 背景透明文字(内容)不透明三种实现方法
好久没写博客了.以前还想着最少一个月抽空写几篇.结果没做到O(∩_∩)O~~.好吧.现在努力,继续坚持. 看着以前写的东西,感觉自己在逐渐成长. 先上图: 本文主要记录如上图一样的.文字或内容不透明, ...
- 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案
最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...
- phpcms_v9 多图字段 内容页,首页,分页自定义字段调用
phpcms_v9 多图字段 内容页,首页,分页自定义字段调用 说明:自定义多图字段名 shigongtu 1 内容页调用 {loop $shigongtu $r} <img src= ...
- 使用disavled属性锁定input内容不可以修改后,打印获取不到对应的值
当我们需要锁定input内容不让修改时,可以使用disabled="disabled"和readonly="readonly", 官方的解释是:disabled ...
- 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- bootstrap模态框modal使用remote第二次加载显示相同内容解决办法
bootstrap模态框modal使用remote动态加载内容,第二次加载显示相同内容解决办法 bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 ...
- 时时监听input内容的改变
心得:我们都知道input有一个change事件,但是是在input元素失去焦点的时候发生,不能时时的监听input内容的改变. 刚开始的时候我是想用setInterval设置计时器的原理定时监听in ...
- 如何修改PDF文件内容,PDF怎么添加背景
很多的情况下,大家都会遇到PDF文件,不管是在学习中还是在工作中,对于PDF文件,文件的修改编辑是需要用到PDF编辑软件的,在编辑文件的时候,发现文件的页面是有背景颜色的,又该如何修改背景颜色呢,不会 ...
随机推荐
- Rest(表述性状态转移)
本文的主要内容有: 1.了解Rest 2.了解RESTful WebService 3.使用SpringMvc实现RESTful ------------------------------我是华丽的 ...
- 深入Java核心 Java中多态的实现机制(1)
在疯狂java中,多态是这样解释的: 多态:相同类型的变量,调用同一个方法时,呈现出多中不同的行为特征, 这就是多态. 加上下面的解释:(多态四小类:强制的,重载的,参数的和包含的) 同时, 还用人这 ...
- MySql中的字符数据类型
MySql中的varchar类型 1.varchar类型的变化 MySQL数据库的varchar类型在4.1以下的版本中的最大长度限制为255,其数据范围可以是0~255或1~255根据不同版本数据库 ...
- 《C#本质论》读书笔记(16)构建自定义集合
16.1 更多集合接口 集合类(这里指IEnumerable层次结构)实现的接口层次结构 16.1.1 IList<T>与IDictionary<TKey,TValue> 字典 ...
- ElasticSearch(站内搜索)
简介 Elasticsearch是一个实时的分布式搜索和分析引擎.它可以帮助你用前所未有的速度去处理大规模数据.它可以用于全文搜索,结构化搜索以及分析,当然你也可以将这三者进行组合.Elasticse ...
- Source Insight编辑器配置
Sublime Text 无疑是一款很优秀的编辑器和阅读器,可惜对于中文编码不支持,网上的ConvertTOUTF8存在BUG,经常转码失败,体验很不好. 现在开始使用source insight,这 ...
- Android onActivityResult没响应
原因: 1.当MainActivity2的启动模式为SingleTask时, 系统为自动返回setResult(Activity.RESULT_CANCELED). 2.当为MainActivity2 ...
- 浏览器-10 Chromium 移动版
移动版 chromium 的iOS版和Android是为两个流行的移动操作系统设计的, UI方面进行了 较大的重新设计; 两者从外观上看颇为相似,但是其内部的渲染引擎的差别非常的大,原因在于iOS对应 ...
- Android入门(十):界面的布局方式及其实际应用
关于Android界面布局,网上已经有了很多非常不错的学习资料,在这里我也不班门弄斧了,推荐两篇我认为写的不错的教程,然后再重点讲一下几种布局方式的实际应用. 教程链接:①http://www.cnb ...
- 实现一个 能在O(1)时间复杂度 完成 Push、Pop、Min操作的 栈
一,问题描述 实现一个栈(元素遵守先入后出顺序),能够通过 min 方法在 O(1)时间内获取栈中的最小元素.同时,栈的基本操作:入栈(Push).出栈(Pop),也是在O(1)时间内完成的. 二,问 ...