阅读数:

如何自定义button样式

0

说明

button按钮可以有多种实现,比如用一个div/span等块状元素进行渲染,设置宽高透明度等等,
也可以用input,input的好处就是就是可以很方便的进行点击控制,disabled or not。如果是
div/span还得js return fasle;不是很方便,这里将分享如何自定义input的样式/

实现

我们要实现一个半透明的带圆角的btn,有输入才能点击,否则不可点击。
根据需求我们第一反应是用btn

  • html

    1
    <input type='button' class='btn' value='登录' />
  • css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.btn{
width: 92%;
height: 45px;
opacity:0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
background-color: #0073bb;
line-height: 45px;
font-size: 18px;
color: #ffffff;
text-align: center;
border-radius: 5px;
border: 1px solid #0073bb;
}
  • 初步效果

ios
ios
android/pc
android

神奇吧,ios竟然表达的意思和实际的渲染有出入,android/pc渲染正常,为什么呢?
我们改用div 试试

1
<div class='btn'>登录</div>

ios
ios
android/pc
android

换了之后发现各平台渲染结果是一样的,那问题就应该出现在input上,它本身自带样式,而我们自定义的
并没有完全覆盖默认,这点在ios尤为明显,去掉默认就好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.btn{
width: 92%;
height: 45px;
opacity:0.5;
-webkit-opacity: 0.5;
-moz-opacity: 0.5;
background-color: #0073bb;
line-height: 45px;
font-size: 18px;
color: #ffffff;
text-align: center;
border-radius: 5px;
border: 1px solid #0073bb;
// 去掉默认
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
}

改回input再次运行

ios
ios
android/pc
android

最后完美搞定。


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^