IOS端： border-color:transparent; andorid端：仅仅使用上面的代码还不够，可以发现select框在某些浏览器（包括微信）内置浏览器下 还会有箭头以及高亮的线框，要除去这个可以使用1-webkit-appearance: none;取消webkit默认的样式。 我们将input、select框设为透明的目的就是为了方便使用设计师制作的样式（即使差1、2个px没对齐也不会察觉） 注意：select的下拉框的样式跟具各个浏览器的不同都不会不同。这里就不研究了！原文：h...
通过基础CSS实现输入提示交互动画效果，并兼容各浏览器！1.效果展示 2.css代码 h4 {margin: 30px 0;}input {margin: 0;font-size: 16px;line-height: 1.5;}.input-fill-x, .input-outline-x, .textarea-outline-x {position: relative;}.input-control:focus + label {color: red;background: white;transform: scale(0.8) translate(0, -17px);}.input-label {padding: 0 5px;position: absolute;left: 10px;top: 3px;tr...
我在做页面的时候遇到过这种情况，在input标签中有默认字，但是设计稿上的颜色和input标签中的placeholder的默认颜色不一致。虽然我们可以在js中写出，但是有点过于麻烦了。所以我就用css来给它设置了一下（注意css中有可能存在兼容性问题，如果实在不行还得用js。不过一般要求不严可以用这个偷偷懒）。<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#txt{height:100%;width:230px;font-size:12px;colo...
<form><div><input id="item1" type="radio" name="item" value="选项一" checked><label for="item1"></label><span>选项一</span></div><div><input id="item2" type="radio" name="item" value="选项二"><label for="item2"></label><span>选项二</span></div>
</form>
div {position: relative;line-height: 30px;}input[type="radio"] {width: 20px;height: 20px;opacity: 0;}label {position: absolute;left: 5px;top: 3px;w...
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><style>.checkbox {position: relat...
经过测试的浏览器：IE6, IE7, IE8, IE9, Firefox, Chrome, Safiri, Maxthon按钮的HTML代码：<input id="btn_comment_submit" type="button" class="comment_btn" value="提交评论"/>CSS代码：input::-moz-focus-inner{ border: 0;padding: 0;}/*针对Firefox*/
.comment_btn{
height:26px;
line-height:22px;/*针对IE*/
width:68px;
}原文：http://www.cnblogs.com/wawahaha/p/3530572.html
css代码：input{width: 200px;height: 40px;}input.focus{border-color: #08c;box-shadow: 0 0 4px #8bd6fb;transition: all .2s ease-out 0s;} 原文：http://www.cnblogs.com/heimanba/p/3868378.html
（从已经死了一次又一次终于挂掉的百度空间人工抢救出来的，发表日期2014-05-05） 飞鱼的声纳顶部的搜索框让我头疼了很长时间，原因是总不能获得跨浏览器的统一样式。主要的问题有这么两个：一是input标签的高度不能统一，Firefox和IE中的高度始终不能一致；二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示，而是靠输入框的左上角显示。 为了彻底解决搜索框的这些问题，我以GreenGaint主...
在日常重构中，form表单家族中的 upload field 在使用 css 美化时令人头疼！默认情况下，各个浏览器下的表现层次不齐！如下图所示，让我等情何以堪。通常，我们的设计师同学、产品同学都希望文件上传域能够在表现上有所突破：点击页面中美化过的图片“选择文件”就可以完美实现文件上传域的功能。唉，理想很丰满，现实很骨感！每当我接到这样的要求就会泪流满面，加图片容易，但它无法工作啊！好吧，苦逼的前端开始想办法了：用JS去...
最近在用C#做Web程序时，碰到一个问题： 将TextBox的asp控件放在Table中的TD里面时，不设置宽度，自动会将TD撑的很大。 查看运行后页面的源代码发现，其实TextBox控件最终在客户端显示的是input。 于是考虑用CSS对每个控件设置宽高。但设置成100%后，会将边框遮住，经过调整，将宽度设置成97%后显示正常。 复制代码代码如下:<style type="text/css"> .borderNone {width:97%; height:100%;border:none;text-align:left;} </style> ...
css样式让input垂直居中css代码： .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; display: table; *position: relative; overflow: hidden; } .div2 { vertical-align: middle; display: table-cell; *position: absolute; *top: 50%; } .div...
多数浏览器默认会缓存input的值，只有使用ctl+F5强制刷新的才可以清除缓存记录。 如果不想让浏览器缓存input的值，有2种方法： 方法一： 在不想使用缓存的input中添加 autocomplete="off"; eg: 方法二： 在 input 所在的form标签中添加 autocomplete="off"; eg:
前几天做客服的时候遇到个客户来说我们的页面出错了, 两边鸡同鸭讲了半天发现都没法理解对方, 让客户截图后发现果然跟我这边不一样, 远程过去一看, 对面用的是 Win10 + Edge, 在我们本该出现 tipsy 的地方鼠标移上去没任何反应, 客户看不到该有的提示, 也难怪要跑过来找客服 一开始以为是 Edge 和 IE11 又出现什么奇葩的 jQuery 事件绑定错误, 需要在 knockout 的动态渲染完成后再做事件绑定, 但是仔细查了下后发现还不是这么回...
最初出现这种情况，我以为你缓存的问题，因为我在FireFox中F5刷新会有记录，但是ctrl+shift+r重新加载就不会有记录。 所以，在HTML页面添加了如下的: 测试结果失败！ 然后，在百度上找了一下，找到了autocomplete。 原来表单的 input 是默认autocomplete="on"，即自动会记录上次操作。只需显示设置autocomplete="off"即可
html5为input添加了原生的占位符属性placeholder，高级浏览器都支持这个属性，例如： 默认的placeholder字体颜色是呈浅灰色，如果想改变这个默认颜色，解决方案如下： input:-moz-placeholder,textarea:-moz-placeholder { color: #999999;}input:-ms-input-placeholder,textarea:-ms-input-placeholder { color: #999999;}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {...
input file在系统默认下的外观：