文章
  • 文章
  • 设计

[原创]打造漂亮的单选框和复选框

来源:UI世界 - yinq 时间:2016-11-24 10:17:19 浏览:3822 次
本站文章,除标明(转)的文章外,其他的都是本站原创,转载请标明出处,谢谢。

表单里面单选框和复选框可以说是一点也不好看,随着css3的越来越流行,往上也有了很多漂亮的写法,这里是从网上的方法中整理出来的,直接拿来用就可以了,可能在实际运用当中,需要做一些微调。下面直接放代码吧

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>漂亮的单选框和复选框样式 - UI世界</title>
<style>
body { padding: 50px; font-family: "微软雅黑"; font-size: 14px;}
a:hover { text-decoration: none;}
.ui-checkbox
{
    position:relative;
    width: 100%;
}
.ui-checkbox input[type=checkbox] { display: none;}
.ui-checkbox span{
     cursor: pointer;
}

.ui-checkbox input[type=checkbox]+span:before
{
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -3px;
    background-color: transparent;
    border-radius: 2px;
    background-color: #e3e3e3;
}

.ui-checkbox input[type=checkbox]:checked+span:before
{
    background-color: #3aab4e;
}

.ui-checkbox input[type=checkbox]:checked+span:after
{
    font-size: 12px;
    content: '✔';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 1px;
    left: 4px;
    color: #FFF;
    display: block;
}

.ui-checkbox input[type=checkbox]:disabled:checked+span:before
{
    opacity: .65;
    background-color: #e3e3e3;
    border: 1px solid #e3e3e3;
}

.ui-radio { display: inline-block; vertical-align: middle;}
.ui-radio input[type=radio] { display: none;}
.ui-radio label[for] { cursor: pointer; margin-top: -3px;}
.ui-radio input[type=radio]:checked+.radio-label .radio:before {
    content: " ";
    position: absolute;
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #fff;
    top: 5px;
    left: 5px;
    border-radius: 50%;
}
.ui-radio .radio-label .radio {
    position: relative;
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #e3e3e3;
    border-radius: 50%;
    vertical-align: middle;
}
.ui-radio input[type=radio]:checked+.radio-label .radio {
    border-color: #3aab4e;
    background-color: #3aab4e;
}

.form-item,
.dream-label { margin-bottom: 10px;}
</style>
</head>

<body>
<form action="#" method="post" target="_top">
  <div class="form-item">
    <div class="dream-label">您最喜欢的球类运动:</div>
    <div class="dream-controls">
      <label class="ui-checkbox"><input type="checkbox" name="ids[]" value="1"><span> 篮球</span></label>
      <label class="ui-checkbox"><input type="checkbox" name="ids[]" value="2"><span> 足球</span></label>
      <label class="ui-checkbox"><input type="checkbox" name="ids[]" value="3"><span> 排球</span></label>
    </div>
  </div>
  <div class="form-item">
    <div class="dream-label">你要生成的sql语句:</div>
    <div class="dream-controls">
      <div class="ui-radio">
        <input type="radio" name="type" id="isInsert" value="1" />
        <span class="radio-label">
          <label class="radio" for="isInsert"></label>
          <label for="isInsert">插入语句</label>
        </span>
        <input type="radio" name="type" id="isUpdate" value="0" />
        <span class="radio-label">
          <label class="radio" for="isUpdate"></label>
          <label for="isUpdate">更新语句</label>
        </span>
      </div>
    </div>
  </div>
</form>
</body>
</html>

效果如图:

转摘文章请标明来源:http://www.uishijie.com/article/24.html

0
0

网站申明关于本人 京ICP备16013026号-2

© 2015 UI世界(www.uishijie.com)声明:本站所发布的设计图片均来自网络收集,版权归原作者所有,在此只是加以分享。如有冒犯,请来信说明。转载的文章均已标明出处,其他均为本站原创,转载请注明出处。