input背景的兼容性

最新推荐文章于 2021-08-09 21:03:57 发布
最新推荐文章于 2021-08-09 21:03:57 发布
阅读量421 收藏
点赞数
文章标签： html input背景的兼容性 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 	<html xmlns="http://www.w3.org/1999/xhtml">
 	<head>
 	<title>input背景的兼容性</title>
 	<style type="text/css">
 	*{margin:0;padding:0;}
 	 
 	p{padding:20px;}
 	 
 	.ctl{background:transparent url(down.png) no-repeat scroll 2px top;line-height:19px;width:150px;height:20px;padding-left:25px;border:1px solid #DDD;}
 	 
 	.ctl_wraper{background:transparent url(down.png) no-repeat scroll 147px ;display:inline-block;width:150px;height:20px;padding-right:10px;border:1px solid #DDD;}
 	 
 	.ctl_wraper input{background-color:transparent;width:150px;padding-top:2px;border:0 none;}
 	</style>
 	</head>
 	<body>
 	<h1>IE浏览器下，可查看区别</h1>
 	要查看区别，请将光标置于文本框内的文字末尾。
 	<p>
 	    出现问题<br />
 	    <input class="ctl" type="text" value="这个是input背景图片兼容性实例" />
 	</p>
 	<p>
	    兼容解决<br />
 	    <span class="ctl_wraper"><input type="text" value="这个是input背景图片兼容性实例" /></span>
 	</p>
 	</body>
 	</html>

j510924
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于input兼容性的总结
Dear_Mr的博客
01-26 1951
一月快要结束了 O(∩_∩)O~ input失去焦点的时候，如何取得input框的值 需求描述：有这样一个表格（表格组件），表格中有几列中是包含input这个输入框的，之前使用的是v-model，现在需要添加一些校验，我想到的就是在input输入框失去焦点的时候，用个函数去处理，这个函数的形参包括，该行所在的下标，input框中的内容，那下面的问题就是关于如何得到input框内的内容
文本输入框input背景的兼容性解决
c#，jquery，ajax，html+css
11-16 589
问题描述： 　　在IE浏览器下，设置文本框的背景图片，当文本框内文字超过文本框的宽度，且光标位于超过文本框长度的文字段的位置时，文本框的背景就会随文本框内的隐藏文字而移动。 　　发上条件： 　　1. IE浏览器 　　2. 文本输入框，且设置了背景图片 　　3. 文本框文字超过其宽度 　　4. 光标位于超过文本框宽度的文字后 　　解决的方法： 　　使用一个内联元素包含文本框，以内联元
对于input标签兼容问题的处理
ganlubaba666的博客
11-16 1017
##placeholder placeholder属性想必大家都不陌生，在表单的制作中经常会使用这个属性，在写西部经济研究院页面时，我遇到了placeholder的兼容问题，在此我整理一下解决思路。 placeholder属性在只在IE9以上的浏览器兼容 在Firefox/Chrome/Safari浏览器下点击placeholder，字符不会消失 在IE 10+里鼠标点击时（获取焦点）place...
input标签在各浏览器下的兼容问题
梦凝哲雪
08-01 1714
转载：http://www.jiangweishan.com/article/input-text-in.html input输入框在各浏览器下的兼容问题比较普遍，也比较头疼， 例如在搜索输入框、表单里input输入框、选择按钮与文字混排等等， 现象：会出现高度以及不对齐的问题 今天就简单介绍下以及处理方法： input标签在各浏览器里默认高度和宽度： 当input标签在type为text时，在F...
input文本框自动填充背景色黄色解决办法
热门推荐
草巾冒小子的博客
08-25 1万+
input文本框自动填充背景色黄色解决方式 如何取消黄背景色？浏览器兼容处理？ 本文目录： input文本框自动填充背景色黄色解决方式 解决前后，截图对比： 解决方式 兼容性说明 解决前后，截图对比： 解决方式 1 · 通过CSS代码约束 &amp;amp;lt;style type=&amp;quot;text/css&amp;quot;&amp;amp;gt; input:-...
常用input的常用方法（坑，兼容性问题及解决方法，取值）
weixin_43668654的博客
08-08 2248
常用input的方法（坑及解决方法）： 一般这样用： /[^\d\,]/g 只能输入数字 /[^\d\，]/g 只能输入数字和逗号，其中逗号是中文逗号 1.使input的光标隐藏 color:transparent; text-shadow:0 0 0 #303030;——改变字体 2.使input获取/失去焦点 js — onfocus/onblur jquery — focu...
CSS为指定的input文本框添加背景
09-25
记得在实际开发中，要考虑到不同浏览器的兼容性问题，可能需要添加前缀（如 `-webkit-`，`-moz-` 等）以确保样式在各个浏览器中都能正确显示。同时，合理运用背景图像可以提升网页的视觉吸引力，但也要注意不要过度...
自定义 input radio 兼容ie6
11-11
另外，随着浏览器更新换代，IE6的市场份额已非常低，大多数现代网站不再需要专门针对它进行兼容性处理。但如果你的网站仍需要支持较旧的浏览器，了解这些技术仍然很有价值。在开发过程中，建议使用渐进增强...
vue里input根据value改变背景色的实例
10-17
这可能是因为浏览器的兼容性问题或者CSS选择器的写法不正确。正确的CSS代码应该是： ```css input::placeholder { color: /* your desired color */; } ``` 确保这个样式规则在你的CSS文件中生效，且能够覆盖原有...
input元素[type="file"]时的样式定制及浏览器兼容性问题探讨
09-28
在网页设计中，`input[type="file"]`元素是一个用于用户选择本地文件的表单控件，但在样式定制上，它常常带来浏览器兼容性问题。由于各浏览器对这个元素的默认样式处理不同，使得开发者在实现一致的用户体验时面临...
46种常见的浏览器兼容性问题大汇总
05-15
以下是一些常见的浏览器兼容性问题及其解决方案： **JavaScript兼容性问题** 1. **HTML对象获取**：在Firefox中，推荐使用`document.getElementById()`来获取元素，而在IE中，`document.idname`也能工作。为了兼容...
input中的兼容性问题
weixin_43612234的博客
01-23 856
解决前端input在安卓和ISO中 的兼容性问题。 1.安卓的 2.iOS的 因为我的手机时安卓的，测试的时候安卓是没有问题的，但是iOS就出现了以上的情况，一开始以为是样式的问题，后面设置看也不行，试了一下的方法就可以了。 //在input标签中添加这两个属性，就可以了。 box-shadow:0px 0px 0px rgba(0,0,0,0); -webkit-appearance:no...
前端：（火狐浏览器兼容） input type ="number"，输入英文字母的问题
凉城古梦猫扑街的博客
06-12 9118
输入框设置只能输入数字，一般浏览器都正常识别number，不过能输入e，因为 e在数学上代表2.718281、有的人这么解决：&lt;input type='number' onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode) ) )' /&gt;2、由于火狐里面没有 input type ="number" 这个设置...
那些年hybrid遇到的兼容性bug
大海攻城狮
03-27 888
几个页面做完了和大家分享下自己的感受。 1.input 聚焦是焦点太大 解决办法 给input外层加一个div，div的高度设置成input的高度（可以稍微高点），这样避免聚焦时焦点太丑。2.input placeholder显示不全 解决办法 给input一个宽度，可以是100%。这样显示全placeholder里边的内容。3.a链接跳页面，重新回到此页面时，需要跳两次才能到跳出 实例
解决浏览器的记录会影响input的背景色问题
qq_41856825的博客
08-09 188
> 解决浏览器的记录账号会变白的问题 input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; background-color:transparen
html输入文本颜色,Input输入字体颜色改变js（兼容IE）
weixin_35686386的博客
06-07 1482
从网上找的代码，自己封装了一下(前提：引用jQuery库)方法1：HTML：javascript:function InputStyleChange(id,p,c1,c2){//函数var placeholder = p;var inputname = id;inputname.onfocus = function(){if ( this.value == placeholder ) {this....
button 兼容性问题
qq_37324690的博客
11-13 1329
改文章是基于 谷歌浏览器，360浏览器（兼容模式），火狐浏览器，和QQ浏览器的极速模式下 兼容性问题 首先我们先了解下  各个浏览器的内核 谷歌浏览器：Google Chrome，谷歌浏览器之前一直使用苹果的webkit内核，但是现在它与苹果内核分道扬镳，自己开创了新的blink内核，这个内核也在被欧鹏（opera浏览器）共同采用和开发； 360极速浏览器：基于谷歌内核和IE内核 （兼容模式...
input设置灰色不可编辑
最新发布
05-31
要将 input 元素设置为灰色且不可编辑，您可以使用以下 CSS 样式： ```css input[readonly] { background-color: #ccc; } ``` 这将将带有 readonly 属性的所有 input 元素的背景颜色设置为灰色。要使 input 元素不可编辑，您可以将其设置为只读（readonly）状态，如下所示： ```html <input type="text" value="Hello World" readonly> ``` 这将使输入框中的文本不可编辑，并将其背景颜色设置为灰色。请注意，只读属性不是 HTML5 的必需属性，但几乎所有浏览器都支持它。如果您需要更大的浏览器兼容性，请考虑使用 JavaScript 来禁用输入框。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值