HTML代码:

  

  1. <form>
  2. <div>
  3. <input id="item1" type="radio" name="item" value="水果" checked>
  4. <label for="item1"></label>
  5. <span style="margin-left: 10px">水果</span>
  6. </div>
  7. <div>
  8. <input id="item2" type="radio" name="item" value="饮料">
  9. <label for="item2"></label>
  10. <span style="margin-left: 10px">饮料</span>
  11. </div>
  12. </form>

  css代码:

  

  1. div {
  2. position: relative;
  3. line-height: 30px;
  4. }
  5.  
  6. input[type="radio"] {
  7. width: 20px;
  8. height: 20px;
  9. opacity:;
  10. }
  11.  
  12. label {
  13. position: absolute;
  14. left: 5px;
  15. top: 8px;
  16. width: 20px;
  17. height: 20px;
  18. border-radius: 50%;
  19. border: 1px solid #999;
  20. }
  21.  
  22. /*设置选中的input的样式*/
  23. /* + 是兄弟选择器,获取选中后的label元素*/
  24. input:checked+label {
  25. background-color: #006eb2;
  26. border: 1px solid #006eb2;
  27. }
  28.  
  29. input:checked+label::after {
  30. position: absolute;
  31. content: "";
  32. width: 5px;
  33. height: 10px;
  34. top: 3px;
  35. left: 6px;
  36. border: 2px solid #fff;
  37. border-top: none;
  38. border-left: none;
  39. transform: rotate(45deg)
  40. }

  效果图:

  

input radio单选框样式优化的更多相关文章

  1. jquery 操作input radio 单选框

    1.jquery选中单选框 2.jquery 取消单选框 3.判断是否选中 4.设置不可编辑

  2. input radio单选框绑定change事件

    html页面: <input type="radio" name="sex" value="female">female < ...

  3. jquery--获取input radio单选框的值

    html <input type="radio" name="sex" value="man" checked> man < ...

  4. 利用CSS 修改input=radio的默认样式(改成选择框)

    html部分: <input id="item2" type="radio" name="item"> <label fo ...

  5. 前端 HTML form表单标签 input标签 type属性 radio 单选框

    <input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en& ...

  6. 用css实现html中单选框样式改变

     我们都知道,input的单选框是一个小圆框,不能直接更改样式.但是我们在很多网页中看到的单选框样式可不仅限于默认的那个样式(看上去没啥新意,也比较丑).那么,接下来我将介绍下如何实现该功能. 首先, ...

  7. TagHelper+Layui封装组件之Radio单选框

    TagHelper+Layui封装组件之Radio单选框 标签名称:cl-radio 标签属性: asp-for:绑定的字段,必须指定 asp-items:绑定单选项 类型为:IEnumerable& ...

  8. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

  9. 纯css3实现的超炫checkbox复选框和radio单选框

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

随机推荐

  1. Kotlin 语言作为Android新的官方语言

    苹果用 swift 作为官方语言替代 object-c  ; 谷歌 刚开完io大会 也宣布 用  kotlin 作为官方语言 替代java.工具还是xcode ,android studio. 来自于 ...

  2. fastjson的JSONArray转化为泛型列表

    背景:一个复杂结构体内部可能有array的数据,例如:{name:"test",cities:[{name:"shanghai",area:1,code:200 ...

  3. Zookeeper--0200--安装与集群搭建、常用命令、客户端工具

    看这里,http://www.cnblogs.com/lihaoyang/p/8358153.html 1,先使用可视化客户端软件 ZooInspector 连接上集群中的一个节点,看下zk的结构: ...

  4. 处理 Maven 项目名称红色感叹号的问题

    问题描述: maven 本地仓库位置移动 ,重启IDE,项目出现感叹号. 解决方案: 附加: 其它原因,造成项目感叹号,且pom.xml和Build Path下又没有相应的错误的提示的情况下. 那么选 ...

  5. 微信小程序图片变形解决方法

    微信小程序的image标签中有个mode属性,使用aspectFill即可 注:image组件默认宽度300px.高度225px mode 有效值: mode 有 13 种模式,其中 4 种是缩放模式 ...

  6. C#中将String类型保存到本地文件的方法

    今天刚刚遇到,要在WinForm中把一个xml保存到本地, 由于之前是学习java的,一时间还真不知道怎么写, 没想到C#居然那么方便,就3句代码就实现了我要的功能: StreamWriter sw ...

  7. python学习: 如何循序渐进学习Python语言

    大家都知道Python语言是一种新兴的编程语言.1989年,Python就由Guido van Rossum发明.Python一直发展态势很好. 原因有几点:1.跨平台性好.Linux.Windows ...

  8. 字符串匹配的KMP算法-16张图片看明白

    作者: 阮一峰 日期: 2013年5月 1日 字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另 ...

  9. 描述linux系统从开机到登陆界面的启动过程

    简述:1.开机BIOS自检2.MBR引导3.grub引导菜单4.加载内核kernel5.启动init进程6.读取inittab文件,执行rc.sysinit,rc等脚本7.启动mingetty,进入系 ...

  10. 【学习笔记】浅析Promise函数

    一.Promise是什么? 在JavaScript中,所有的代码都是单线程执行,所以javaScript的所有网络操作(“GET”/"POST"/"PUT"/& ...