总结一下前端开发中经常会用到的一些常用input的样式修改问题
/*改变checkbox默认样式*/<input type="checkbox"class="input_check" id="check1"><label for="check1"></label>//元素
.input_check {
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;//磨成圆角
visibility: hidden;//让原本样式隐藏
background: #E92333;
}
.input_check+label {
display: inline-block;
width: 20px;
border-radius: 50%;
height: 20px;
background: url('img/Group 8.png') no-repeat;//存放点击后的图片效果
background-position: -31px -3px;
border: 1px solid #AFAFAF;//设置border颜色
background-size: 100% 100%;
}
.input_check:checked+label {
background-position: 0px 0px;//给图片定位,让图片填充boder
}
//效果图
.inputreset{
border-left-width:0px;
border-top-width:0px;
border-right-width:0px;
border-bottom: 1px solid #d2d2d2;//只留下边框
width: 300px;
background: transparent;
}
//效果图(只有下边框的输入框)
input textarea{
text-indent: 2px;
}
//效果图
/*----------用来移除向下箭头----------*/
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
}
/*--------------去掉上下箭头按钮-------*/
input[type=date]::-webkit-inner-spin-button { visibility: hidden; }
/*----------用来移除叉叉按钮----------*/
input[type="date"]::-webkit-clear-button{
display:none;
}
//效果图(这个效果就不用我在贴了,各位可以自己试一下)
/*input type=submit时禁用默认提交样式*/<form οnsubmit="return false">
<input type="submit" />
</form>
写的不全,欢迎指正!