css3自定义checkbox radio的样式

自定义input[type="radio"]的样式

vue input复选框checkbox默认样式纯css修改

vue 修改checkbox样式:

<div class="data_list"><input type="checkbox" class="check_box tui-checkbox" v-model="checkedNames"><label class="title">xx</label>
</div>css:
.data_list{}
.tui-checkbox:checked {background: #1673ff;border: solid 1px #1673ff;
}
.tui-checkbox {width: 0.5rem;height: 0.5rem;background-color: #ffffff;border: solid 1px #dddddd;-webkit-border-radius: 50%;border-radius: 50%;font-size: 0.8rem;margin: 0;padding: 0;position: relative;display: inline-block;vertical-align: top;cursor: default;-webkit-appearance: none;-webkit-user-select: none;user-select: none;-webkit-transition: background-color ease 0.6s;transition: background-color ease 0.6s;
}
.tui-checkbox:checked::after {content: '';top: 0.1rem;left: 0.09rem;position: absolute;background: transparent;border: #fff solid 2px;border-top: none;border-right: none;height: 0.12rem;width: 0.25rem;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);transform: rotate(-45deg);
}

css：

<style>
.xieyi input[type="checkbox"]{display: none;outline: none;
}
.xieyi label{display: inline-block;width: 10px;height: 10px;border: 1px solid #000;position: relative;border-radius: 3px;
}
.xieyi input[type="checkbox"]:checked+label{/*当复选框选的的时候改变边框色*/border-color: #dd5541;
}
.xieyi input[type="checkbox"]:checked+label:before{content: '';display: inline-block;width: 2px;height: 8px;background: #dd5541;transform:rotate(-30deg);position: absolute;top: 1px;left: 0;
}
.xieyi input[type="checkbox"]:checked+label:after{content: '';display: inline-block;width: 2px;height: 12px;background: #dd5541;transform:rotate(30deg);position: absolute;top: -2px;left: 5px;
}
</style>

html:

<div class="xieyi"><input type="checkbox" id="check"><label for="check"></label><!--input的id可以和label的for相互绑定--></div>

/*全选*/
.heji #select_all input {display: none;
}.heji #select_all span {float: left;width: 0.2rem;height: 0.2rem;border-radius: 50%;border: 1px solid #a9a6a6;
}.heji #select_all input:checked+span {/*推荐*//*background: url(binggou.png) no-repeat center;*/background: red;background-size: 30px;
}<label id="select_all"><input type="checkbox" /><span></span>
</label>

另一种：radio

css：

<style>
.radio_box{margin-top: 0.55rem;display: flex;
}
.select_card{color: #999999;font-size: 0.28rem;
}
.select_card:nth-child(2){margin-left: 1.4rem;
}
.select_card input[type="radio"]{opacity: 0;    width: 0;    height: 0;
}
.select_card input[type="radio"] + label::before{content: "\a0"; /*不换行空格*/display: inline-block;vertical-align: middle;font-size: 18px;width: 0.35rem;height: 0.35rem;margin-right: .4em;border-radius: 50%;border: 1px solid #999999;text-indent: .15em;line-height: 1;
}
.select_card input[type="radio"]:checked + label::before{background: url(../images/gou.png) no-repeat center;border:none;background-size: 100% 100%;
}
</style>

html:

<div class="radio_box"><div class="select_card"><input type="radio" id="man" name="sex" checked /><label for="man">男</label></div><div class="select_card">                <input type="radio" id="woman" name="sex" /><label for="woman">女</label></div>
</div>

css3自定义checkbox radio的样式相关推荐

【微信小程序】checkbox,radio的样式修改
一.checkbox样式修改默认勾选与未勾选样式 wxml <checkbox color="#fff" value="{{id}}" checked= ...
html单选按钮自定义,css | radio单选按钮样式自定义
radio单选按钮默认样式改变,radio默认样式确实有点丑,而且不能适合所有的UI设计稿,现在UI稿的花样是越来越多了,所有使用css自定义radio单选按钮样式还是很重要的. 单选按钮最常见的地方 ...
CSS3自定义Checkbox特效
在线演示本地下载
html设置文本的下划线效果,CSS3 自定义文本下划线样式
CSS 语言: CSSSCSS 确定 body { background: #165578; } .wrapper { width: 500px; margin: 0 auto; } h1 { col ...
html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
[css] 如何修改美化radio、checkbox的默认样式？
[css] 如何修改美化radio.checkbox的默认样式? 利用after伪元素自定义radio或者checkbox 或是利用图片进行样式修改个人简介我是歌谣,欢迎和大家一起交流前后端知识. ...
php复选框样式,如何自定义checkbox样式？附代码
本篇文章给大家带来的内容是关于如何自定义checkbox样式?附代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 修改原生checkbox样式. 效果原理 1.利用CSS3属性 ...
【CSS】自定义checkbox样式
修改原生checkbox样式. 效果原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
checkbox和radio的样式美化问题
如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对 ...

css3自定义checkbox radio的样式

css3自定义checkbox radio的样式相关推荐

最新文章

热门文章