纯CSS 单/复选框 美化请选择iPhone 型号

iPhone 6s iPhone 6s Plus iPhone 7 iPhone 7 Plus
 

选择兴趣爱好

女 绘画 摄影 骑行
 

原理在这里 input:checked + label

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport" />

<style type="text/css">
body {
font: 14px/150% microsoft yahei,tahoma;
}
.clear {
clear: both
}
.RadioStyle input {
display: none
}
.RadioStyle label {
border: 1px solid #00a4ff;
padding: 2px 10px 2px 5px;
line-height: 28px;
min-width: 80px;
text-align: center;
float: left;
margin: 2px;
border-radius: 4px
}
.RadioStyle input:checked + label {
background: url(images/ico_checkon.svg) no-repeat right bottom;
background-size: 21px 21px;
color: #00a4ff
}
</style>

<title>纯CSS 单/复选框 美化</title>
</head>
<body>

请选择iPhone 型号

<div class="RadioStyle">
<div class="Block PaddingL">
<input type="radio" name="Storage" id="model1" />
<label for="model1">iPhone 6s</label>
<input type="radio" name="Storage" id="model2" />
<label for="model2">iPhone 6s Plus</label>
<input type="radio" name="Storage" id="model3" />
<label for="model3">iPhone 7</label>
<input type="radio" name="Storage" id="model4" checked />
<label for="model4">iPhone 7 Plus</label>
</div>
</div>

<div class="clear"></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
选择兴趣爱好

<div class="RadioStyle">
<div class="Block PaddingL">
<input type="checkbox" id="love1" />
<label for="love1">女</label>
<input type="checkbox" id="love2" />
<label for="love2">绘画</label>
<input type="checkbox" id="love3" />
<label for="love3">摄影</label>
<input type="checkbox" id="love4" checked />
<label for="love4">骑行</label>
</div>
</div>

<div class="clear"></div>

原理在这里 input:checked + label
</body>
</html>

纯css3单选框/复选框美化样式代码的更多相关文章

  1. 关于通过jq /js 实现验证单选框 复选框是否都有被选中

    今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...

  2. php一些单选、复选框的默认选择方法（示例）

    转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...

  3. Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...

  4. iCheck获取单选和复选框的值和文本

    //获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...

  5. 纯css美化单选、复选框

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. 单选框 复选框 隐藏之后，绑定的change事件在ie中失效的问题

    有时候需要对单选框和复选框进行美化,就需要在<input type="radio">和<input type="checkbox">元素 ...

  7. 【转】纯CSS设置Checkbox复选框控件的样式

    Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...

  8. jquery单选框 复选框表格高亮 选中

    单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...

  9. selenium+Python（定位 单选、复选框，多层定位）

    1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...

随机推荐

  1. golang初识 - install go on ubuntu

    WSL: Ubuntu 18.04 1. install go (1) unzip sudo mkdir -p /usr/local/go sudo tar zxvf go1.12.4.linux-a ...

  2. logstash同步mysql数据失败

      问题描述 前提: 项目采用Elasticsearch提供搜索服务,Mysql提供存储服务,通过Logstash将Mysql中数据同步到Elasticsearch. 问题: 使用logstash-j ...

  3. （python基础 函数）

    关键字参数:关键字参数和函数调用关系紧密,函数调用使用关键字参数来确定传入的参数值.使用关键字参数允许函数调用时参数的顺序与声明时不一致,因为 Python 解释器能够用参数名匹配参数值 必需参数:必 ...

  4. Android 开发 实现文本搜索功能

    核心逻辑方法: /** * 搜索item * @param searchContent 需要搜索的文本内容 */ public void searchItem(String searchContent ...

  5. 小程序[publib]:1 request:fail ssl hand shake error 如果用的是阿里云和宝塔那么如下解决

    小程序[publib]:1 request:fail ssl hand shake error 如果用的是阿里云和宝塔那么如下解决 宝塔里面的站点SSL右侧的配置(PEM格式) 需要把 阿里云 下载的 ...

  6. 快乐！ajax入门（1）

    今天试着默写ajax时出现了神秘的问题,出现如图所示的错误: 百度了一下,说是跨源问题,我以为放在同一个文件夹不也是同源嘛!结果打扰了,属实是弟弟,协议,域名,端口相同的算同源,其他的不是!!! 最后 ...

  7. Python爬虫与数据分析之模块：内置模块、开源模块、自定义模块

    专栏目录: Python爬虫与数据分析之python教学视频.python源码分享,python Python爬虫与数据分析之基础教程:Python的语法.字典.元组.列表 Python爬虫与数据分析 ...

  8. chinalife的经验

    1.当<img src="">时,浏览器会有生成border,可以使用css选择器,img[src=""] {/*设置样式*/}: 2.jquery ...

  9. 2019/4/17 Linux学习

    一.Linux的文件系统 其中/prov./srv./sys 文件为文件系统,技术不过硬不要去修改:二.关于Xshell.Xft1.服务器的端口可有65535个可设置,开的越多安全性越差:2.远程登录 ...

  10. 关于第一个launcher开发笔记

    本笔记主要记录阅读关于launcher代码是的相关知识点. viewpager的简单使用(适配器模式):https://www.cnblogs.com/fuly550871915/p/4922953. ...