最新消息:文章中包含代码时,请遵守代码高亮规范!

纯css自定义radio,checkbox样式,提高用户体验【原创】

HTML+CSS 陈, 梦娟 726浏览 0评论

在页面编写的时候我们需要自定义radio样式,每个浏览器的渲染效果不一样,而且样式是系统默认的,不太美观,所以为了提高用户体验以及美观,我们需要对radio,chenckbox样式进行美化。

这里只选取radio进行样式编写,checkbox以此类推就ok了。

  1. <form action=“” method=“post”>
  2.         <input type=“radio” name=“sex” id=“male” value=“male”>
  3.         <input type=“radio” name=“sex” id=“female” value=“female”>
  4.     </form>

效果如下图所示

编写思路先说一下,起先把input浏览器渲染的按钮清除掉,采用display:none;然后给子元素添加label标签以至于提高用户体验点击按钮的时候可以关联到文字,这样不止点击按钮才可以选中,同时点击文字也可以选中。

  1. <form action=“” method=“post”>
  2.         <label for=“male” class=“main”>
  3.             <input type=“radio” name=“sex” id=“male” value=“male”>
  4.             <span id=“test”></span>
  5.         </label>
  6.         <label for=“female” class=“main”>
  7.             <input type=“radio” name=“sex” id=“female” value=“female”>
  8.             <span id=“test”></span>
  9.         </label>
  10.     </form>

 

 

 

  1. .main{
  2.             display: inline-block;/*在一行显示,*/
  3.         }
  4.         .main input{
  5.             displaynone;/*对.main input进行隐藏,用span.test来代替按钮,再进行样式编写*/
  6.         }
  7.         #test{
  8.             box-sizing: border-box;//告诉浏览器使用什么盒模型
  9.             positionrelative;//进行定位
  10.             display: inline-block;//行内显示
  11.             width16px;
  12.             height16px;
  13.             border2px solid red;
  14.             border-radius: 50%;
  15.             floatleft;//浮动,写到这一部按钮本来是在文字后面,左浮动使按钮在文字前面
  16.             margin4px 10px 0;
  17.             padding2px;//和background-clip是一起使用的,不知道background-clip: content-box;的同学去查一下什么意思
  18.             background-clip: content-box;
  19.         }
  20.         input:checked + span{//input:checked是选择每个被选中的 <input> 元素。+ span:选择紧接在 <input> 元素之后的所有 <span> 元素。
  21.             backgroundgreen;
  22.         }

最终效果图如下图所示

转载时请注明出处及相应链接,本文永久地址:https://blog.yayuanzi.com/23039.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者blue的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!