移动端对radio和checkbox的样式调整

原创 2015年07月07日 11:51:58
<style>
*{padding: 0;margin: 0;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none;}
#checkbox{width:25px;height: 25px;-webkit-appearance: none;background: #ccc;}
#checkbox:checked{background: #ff0;}
.radiobox{width:25px;height: 25px;-webkit-appearance: none;background: #0ff;}
.radiobox:checked{background:#00f;}

</style>
</head>
<body>
 <div class="container">
    <input type="checkbox" id="checkbox"/> <br/>
    <input type="radio" class="radiobox" name="question"/>A <input type="radio" class="radiobox" name="question"/>B
 </div>
</body>
</html>

纯CSS 实现radio checkbox样式美化

我们知道CSS 是不能直接定义radio 标签和checkbox 标签的样式,但是默认的实在是太丑了,总要想办法来美化美化这货的。强大的CSS选择器可以帮助我们来实现美化。 首先我们看我们美化过...
  • Jessica_hhh
  • Jessica_hhh
  • 2016年08月22日 14:51
  • 4509

一款非常漂亮的bootstrap表单checkbox/radio样式推荐

转自:http://blog.csdn.net/killzero/article/details/20282789?utm_source=tuicool http://www.bootcss.co...
  • chelen_jak
  • chelen_jak
  • 2015年05月14日 11:54
  • 18697

纯CSS美化单复选框(checkbox、radio)

这是在工作中遇到需要美化单选框和复选框查资料看到别人的,特别声明此文是转载别人,在此感谢原作者。觉得很有用在此码起来 原理就是:隐藏选择框本身,在利用标签放在原来选择框位置上。看代码: ...
  • joeone_strong
  • joeone_strong
  • 2017年04月13日 18:02
  • 6447

一款非常漂亮的bootstrap表单checkbox/radio样式推荐

如题。 http://www.bootcss.com/p/icheck/ 这个bootstrap提供的icheck插件,首先是非常小。效率相对较高。其优点如下图所示: ...
  • white__cat
  • white__cat
  • 2017年02月18日 16:49
  • 1998

修改radio、checkbox、select默认样式的方法

样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求。趁着这次开发的页面中有这方面的需求,在这里整理一下修改r...
  • a32524150195
  • a32524150195
  • 2017年03月10日 17:29
  • 2092

input的checkbox和radio控件样式美化

复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般不能满足我们的需求,设计师喜欢一些漂亮的图片,用css做出此效果。 input#gps_open_cl...
  • wuyou1336
  • wuyou1336
  • 2016年08月30日 18:34
  • 1890

移动端常用样式设置

-webkit-tap-highlight-color点击一个链接或者有事件监听的元素被点击的时候会被高亮显示, 解决方式body { -webkit-tap-highlight-color:...
  • butterfly5211314
  • butterfly5211314
  • 2017年12月04日 14:16
  • 105

css:默认的checkbox、input、radio太丑了?手把手教你改变使用纯css3改写的带动画的默认样式

项目的github地址为: https://github.com/sunshine940326/css3formeledemo 本文首发于我的个人博客,http://cherryblog.si...
  • sunshine940326
  • sunshine940326
  • 2017年05月10日 23:01
  • 4840

支持ie8单选框与复选框自定义样式

css 样式 /* wrapper divs 复选框与单选框样式 */ .custom-checkbox,.custom-radio{position:relative;} /* input, lab...
  • zhu_nana
  • zhu_nana
  • 2016年06月21日 17:36
  • 3725

一款单选框radio样式

.radio-btn { width: 20px; height: 20px; display: inline-block; ...
  • vuturn
  • vuturn
  • 2015年12月10日 09:57
  • 2591
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:移动端对radio和checkbox的样式调整
举报原因:
原因补充:

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