45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 电脑教程 > 阅读资讯:怎么样通过HTMl+CSS实现单选框,复选框美观的样式?

怎么样通过HTMl+CSS实现单选框,复选框美观的样式?

2017-10-14 14:43:37 来源:www.45fan.com 【

怎么样通过HTMl+CSS实现单选框,复选框美观的样式?

1.背景图

怎么样通过HTMl+CSS实现单选框,复选框美观的样式?

html

<div class="check-wrappers">
  <span class="c-checkbox checked">
    <input type="radio" autocomplete="off" name="type" style="display:none;" value="1" checked="checked">
  </span>
  <span></span>
</div>

css

.cart-checkbox.checked {
  background-position: -29px 0;
}
.c-checkbox {
  display: block;
  width: 25px;
  height: 25px;
  margin: 0 auto;
  background: url(/shop-cart.png) no-repeat 0 0;
  background-size: 60px 120px;
}

以上所述是小编给大家介绍的HTML+CSS实现单选框、复选框美观的样式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对路饭网站的支持!


本文地址:http://www.45fan.com/dnjc/93027.html
Tags: 实现 单选 HTML+CSS
编辑:路饭网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部