• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > 表单复选框checkbox怎样美化样式?

    表单复选框checkbox怎样美化样式?

    作者: 分类:HTML5与CSS3.0 点击: 474 次
    wordpress CMS主题:ssmay主题

      复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。

      如果只考虑谷歌内核的浏览器的话,那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持,这就逼得大家另想办法了。

      利用label挂钩checkbox的特点来实现。

      当html代码中,label的for属性值和checkbox的id值一样的时候,label就可以控制checkbox的选择了。

      html代码如下:

      Markup
      <div id="check">
          <input type="checkbox" id="btn-check">
          <label for="btn-check"><span>全天</span></label>
      </div>

      为label的伪元素添加背景图片,覆盖真正的checkbox对象,这样,既有图片的美观效果,又有checkbox一切的交互行为。

      设计一个图片如下,默认状态,点击状态,不可用状态。

      btn1.png

      这里使用了定位,不然不能覆盖原始的复选框。而且文字和图片之间要间隔,文字也需要设置为定位对象。总之,这里都是定位关系。

      这个效果只兼容IE9以上。

      CSS
      #check{
      	position:relative;}
      input[type=checkbox]+label{
      	position:absolute;
      	width:60px;
      	height:20px;}
      input[type=checkbox]+label:before{
      	content:"";
      	position:absolute;
      	width:20px;
      	height:20px;
      	background:url(images/btn1.png) no-repeat;
      	}
      input[type=checkbox]+label span{
      	font-size:14px;
      	position:absolute;
      	left:30px;}
      input[type=checkbox]:checked+label:before{
      	background-position:-28px 0;}
      input[type=checkbox]{
      	position:absolute;
      	left:0;
      	top:0;}

       



      QQ二维码

    文章作者:hero2018
    本文地址:http://wanlimm.com/77201808216640.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.