表单input控件的单选框【radio】、复选框【checkbox】类型的样式美化

最新推荐文章于 2024-08-11 16:46:50 发布

芒种017

最新推荐文章于 2024-08-11 16:46:50 发布

阅读量3.5k

点赞数 1

分类专栏：前端 css htm 文章标签：表单input控件的单选框【radio】、复选框【check 美化单选框、复选框样式去除单选框、复选框的默认样式表单美化方式用CSS美化表单

本文链接：https://blog.csdn.net/weixin_41848880/article/details/83823819

版权

前端同时被 3 个专栏收录

18 篇文章 1 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

htm

11 篇文章 0 订阅

订阅专栏

一、单选框默认样式的修改

1、效果

2、结构代码

   <div class="tl_sqxq">
        <div class="tl_input">
            <input type="radio" name="pj" id="usename" />
            <lable for="usename">满意</lable>
        </div>

        <div class="tl_input">
            <input type="radio" name="pj" id="usename" class="nzan" id="nzan" />
            <lable for="nzan">不满意</lable>
        </div>
    </div>

3、css样式代码

.tl_sqxq {
  color: #333;
  font-size: 0.4rem;
  margin-top: 0.53333333rem;
  overflow: hidden;
}
.tl_sqxq span {
  float: left;
}
.tl_sqxq p,
.tl_sqxq .tl_img {
  float: left;
  width: 6.72rem;
}
.tl_sqxq .tl_img img {
  width: 100%;
}
.tl_sqxq .tl_input {
  line-height: 0.53333333rem;
  float: left;
  margin-right: 1.33333333rem;
}
.tl_sqxq .tl_input input {
  width: 0.53333333rem;
  height: 0.53333333rem;
  line-height: 0.53333333rem;
}

4、下面是修改单选框默认样式的CSS代码（修改默认样式的关键样式）

/*未选中状态*/ 
input[type="radio"] {
  background: url(../images/zan_nor.png); /*背景图路径*/
  background-size: contain;
  vertical-align: middle;
  -webkit-appearance: none;
}
/*选中状态*/
input[type="radio"]:checked {
  background: url(../images/zan.png);/*背景图路径*/
  background-size: contain;
}

二、复选框默认样式的修改

1、效果

2、结构代码（与单选框类是，只是将type类型改为type="checkbox"）

   <div class="tl_sqxq">
        <div class="tl_input">
            <input type="checkbox" name="pj" id="usename" />
            <lable for="usename">苹果</lable>
        </div>

        <div class="tl_input">
            <input type="checkbox" name="pj" id="usename" class="nzan" id="nzan" />
            <lable for="nzan">雪梨</lable>
        </div>
        <div class="tl_input">
            <input type="checkbox" name="pj" id="usename" class="nzan" id="nzan" />
            <lable for="nzan">桃子</lable>
        </div>
    </div>

3、css样式代码

.tl_sqxq {
  color: #333;
  font-size: 0.4rem;
  margin-top: 0.53333333rem;
  overflow: hidden;
}
.tl_sqxq span {
  float: left;
}
.tl_sqxq p,
.tl_sqxq .tl_img {
  float: left;
  width: 6.72rem;
}
.tl_sqxq .tl_img img {
  width: 100%;
}
.tl_sqxq .tl_input {
  line-height: 0.53333333rem;
  float: left;
  margin-right: 1.33333333rem;
}
.tl_sqxq .tl_input input {
  width: 0.53333333rem;
  height: 0.53333333rem;
  line-height: 0.53333333rem;
}

4、下面是修改复选框默认样式的CSS代码（修改默认样式的关键样式）

注：方法与单选框的一样，只是将type类型改为：input[type="checkbox"]

.tl_sqxq .tl_input input[type="checkbox"] {
  background: url(images/zan_nor.png);/*背景图路径*/
  background-size: contain;
  vertical-align: middle;
  -webkit-appearance: none;
}
.tl_sqxq .tl_input input[type="checkbox"]:checked {
  background: url(images/zan.png);/*背景图路径*/
  background-size: contain;
}