关于input默认样式

原创 2018年04月17日 15:49:55

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

}

 //效果图(这个效果就不用我在贴了,各位可以自己试一下)

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

</form>

写的不全,欢迎指正!

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_38791717/article/details/79975861

input清除默认样式及兼容问题的解决方法

Document input{ background:none; outline:none; border:0px; } .search_box{ width:210px; ...
  • Levis_1993
  • Levis_1993
  • 2015-07-18 09:38:07
  • 19989

如何去掉input默认样式

第一种:直接在input中加style=“outline:none;” 第二种方式:在顶部style中直接控制css样式:        input{outline:none;} ...
  • Mr_yq
  • Mr_yq
  • 2017-10-15 10:12:46
  • 6079

一个巧妙地方式改变input的默认样式

html css #check-me1{display:none;} 将input隐藏掉,如何对label设置样式 并且可以设置点击之前和之后的样式...
  • Kevin_like
  • Kevin_like
  • 2016-08-05 00:32:07
  • 1915

更改input等的默认样式

input[type="radio"]{ position: absolute; left: 50%; top: 30%; transform: translateX(-50%); ...
  • tanmuxue
  • tanmuxue
  • 2017-03-06 16:10:24
  • 713

移动web开发,ios下移除input默认样式

IOS环境下的按钮都是经过美化的,但通常我们在设计web app的时候不需要这些看上去老土的样式,所以,去除这些显得很有必要。 下面这句代码就是重置这些样式的: input[type=...
  • ZuoYanDeHuangHun
  • ZuoYanDeHuangHun
  • 2014-04-11 17:06:45
  • 6587

如何去除input标签点击之后出现的默认样式

新项目刚刚开工碰上的第一个坑,记录一下,防止以后再踩进去~
  • yike_dc
  • yike_dc
  • 2017-08-08 18:52:33
  • 893

关于<input type="button" value="搜索">默认样式的清除

今天在写搜索框的时候,用到了input。由于整体美观的考虑需要清除它的默认样式,改成自己想要的。   先来看看没有清除前的样式。   代码如下: input默认样式清除 ...
  • qq_38275944
  • qq_38275944
  • 2017-05-30 20:26:08
  • 2190

HTML5 input改变默认样式

最近使用了html5中的input,感觉很牛逼,有很多类型和属性方便小伙伴去做各种好看的表单样式。下面我们先来看看HTML5默认的input的一些样式(本文主要讨论的是验证样式): 默认验...
  • weiweismile123
  • weiweismile123
  • 2017-04-01 12:35:10
  • 4562

如何移除webkit浏览器下 input 元素获得焦点后的默认样式

http://www.aiubug.com/?p=458
  • u012307002
  • u012307002
  • 2014-02-16 16:26:54
  • 929

修改input默认placeholder的默认样式

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {  color: #fff;  }  input:-...
  • u013853928
  • u013853928
  • 2017-04-30 23:12:07
  • 1930
收藏助手
不良信息举报
您举报文章:关于input默认样式
举报原因:
原因补充:

(最多只允许输入30个字)