关于input默认样式

总结一下前端开发中经常会用到的一些常用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

}

         //效果图

          

/*改变input text默认样式*/
.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;

}

 //效果图（这个效果就不用我在贴了，各位可以自己试一下）

扫描二维码关注公众号，回复： 29550 查看本文章

/*input type=submit时禁用默认提交样式*/
<form  onsubmit="return false">
<input type="submit" />

</form>

写的不全，欢迎指正！