自定义表单元素样式

一、 修改placeholder颜色

::-webkit-input-placeholder { color: red; }

:-moz-placeholder {/* Firefox 18- */ color: red; }

::-moz-placeholder{/* Firefox 19+ */ color: red; }

:-ms-input-placeholder { color: red; }

二、修改google浏览器表单默认样式

input:-webkit-autofill {    //修改黄色背景
  -webkit-box-shadow: 0 0 0px 1000px #ccc inset; //用阴影覆盖背景颜色
  -webkit-text-fill-color: #fff;
}
input,textarea:focus {    //修改获取焦点时蓝色边框
    outline: none;
}

三、修改checkbox样式

    （1）修改样式（兼容性不好）

        input[type=checkbox]{
		width: 18px;
		height: 18px;
		appearance: none;  //将原有样式删除
		-webkit-appearance: none;
		-o-appearance: none;
		/*-moz-appearance: none;*/ //火狐不兼容，不能删除原有样式
		border:1px solid #c30b18;
		color: #c30b18;
        }
        input[type=checkbox]:checked{ //选中以后的样式
		background: url('/img/checkbox.png') no-repeat 2px 1px;
		background-size: 14px 14px;
        }

    （2）用label替代radio或checkbox,自定义样式

        <input type=’radio’ id=’test’>
	<label for=’test’></label>

        input[type=radio]{
		display: none;
        }
        form label{
		box-sizing: border-box;
		text-align: left;
		padding-left: 0.6rem;
		display: block;
		width: 100%;
		height: 1.2rem;
		line-height: 1.2rem;
		border-bottom: 0.01rem solid #e5e5e5;
        }
        input[type=radio]:checked + label {
		background:url('/img/mobile/pay-select.png') 9.9rem 0.5rem no-repeat;
		background-size: 0.35rem 0.22rem;
        }  

四、修改select样式      

     select::-ms-expand{   //清除ie箭头
 	display: none; 
    }
    .edit-address select{
	margin-top: 15px;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	width: 216px;
	height: 36px;
	border: 0px;
	padding-left: 5px;
	margin-right: 10px;
	background: url('/img/address-arrow.png') no-repeat right center #f2f2f2;//自定义下拉箭头图片
	background-size: 14px 14px;
	color: #808080; 
    }