css修改原生radio样式
日常工作中经常会用到单选框radio,而原生样式不好看无法满足项目要求,模拟写一个又比较麻烦,所以写了一个改变原生样式的demo。
原生样式:
改变后的样式:
以下为demo代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.input_radio li {
display: inline-block;
position: relative;
list-style: none;
}
.input_radio input[type="radio"] {
display: none;
}
.input_radio span {
padding: 0 12px;
display: inline-block;
background: #F4F4F4;
border: 1px solid #F4F4F4;
border-radius: 4px;
line-height: 28px;
text-align: center;
color: #2D333B;
cursor: pointer;
}
.input_radio input:checked+span {
background: rgba(93,142,216,0.16);
border-color: #5D8ED8;
color: #5D8ED8;
}
</style>
</head>
<body>
<ul class="input_radio">
<li>
<label for="optionLable00">
<input id="optionLable00" name="option0" type="radio" checked="checked">
<span class="option-label">橙色</span>
</label>
</li>
<li>
<label for="optionLable01">
<input id="optionLable01" name="option0" type="radio">
<span class="option-label">红色</span>
</label>
</li>
</ul>
</body>
</html>
css修改原生radio样式的更多相关文章
- css修改placeholder的样式
css修改placeholder的样式 input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: ...
- sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标
上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包 在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...
- 利用CSS 修改input=radio的默认样式(改成选择框)
html部分: <input id="item2" type="radio" name="item"> <label fo ...
- css修改滚动条默认样式
之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...
- css修改select默认样式
先来看看效果图: css: <style media="screen"> .select_demo, .select_list { width: 400px; heig ...
- css美化checkbox radio样式
/*check,radio*/ input.check_txt[type='checkbox']{ display: none; } input.check_txt[type='checkbox'] ...
- css 修改默认滚动条样式
来自:https://www.cnblogs.com/juqian/p/6273808.html 侵删 <div class="inner"> <div clas ...
- 【CSS】自定义checkbox样式
修改原生checkbox样式. 效果 原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
- 【前端】input radio多选事件获取所有选中的id,radio样式优化可修改
$("#all_button").on('click', function() { obj = document.getElementsByClassName("inpu ...
随机推荐
- IP通信基础学习第六周(下)
硬件地址又称物理地址或MAC地址 以太网的MAC帧格式开始的标志是有11出现时,没电时自动结束 适配器的重要功能:进行串行/并行转换:对数据进行缓存:在计算机的操作系统安装设备驱动系统:实现以太协议 ...
- sql 与 mysql
my sql 中=和!=运算符是不起作用的:
- oracle数据库,恢复到24小时内的数据
因为更新的时候忘记添加条件,导致数据混乱. 用此方法,把数据恢复. --首先查询在某个时间点的数据 t_asn_dtl 为表名; SELECT * FROM t_asn_dtl AS OF TIMES ...
- java项目word文件转html文件
最近在项目开发中用户提出要在电脑上没有装office时在浏览器中打开word文件,最后确定的逻辑:用户选择想要查看的文件,页面js判断文件是否为word.不是执行下载,是后端根据word文件后缀访问对 ...
- 2.1JAVA基础复习——JAVA语言的基础组成注释和常量变量
JAVA语言的基础组成有: 1.关键字:被赋予特殊含义的单词. 2.标识符:用来标识的符号. 3.注释:用来注释说明程序的文字. 4.常量和变量:内存存储区域的表示. 5.运算符:程序中用来运算的符号 ...
- pandas替换一列中的汉字为数字
表格的一列“总金额”应该全部为数字,但其中少数项出现汉字,应该将汉字替换为数字,才能进行后面的计算. 先定义一个函数: def is_number(s): try: float(s) return T ...
- 简单GC具体操作参数查看
代码: public class HeapTest { private static final int _1M = 1024 * 1024; public static void main(Stri ...
- 论文笔记:Auto-ReID: Searching for a Part-aware ConvNet for Person Re-Identification
Auto-ReID: Searching for a Part-aware ConvNet for Person Re-Identification 2019-03-26 15:27:10 Paper ...
- 极其简单的VSCode C++环境配置
下载我打包的文件VSCode-cpp.7z.001 和 VSCode-cpp.7z.002,解压. 在系统环境变量中添加:你解压的路径\Project\.vscode\MinGW\bin. 打开你解压 ...
- ng/cli new skip install and do not create a folder
ng new myApp --skip-install --directory ./