css按钮边框颜色不一致,CSS：如何添加不同颜色的边框来输入单选按钮标签？_MHJCR的博客-程序员宅基地
技术标签： css按钮边框颜色不一致
我有一个形式(它们具有相同的“名称”属性)分组一些单选按钮和我想补充盒/不同颜色的边框围绕them.Something这样的：CSS：如何添加不同颜色的边框来输入单选按钮标签？
例子：
对CSS按钮的代码：
.form ul {
list-style: none;
height: 100%;
width: 100%;
margin: auto;
padding: 0;
}
ul li {
color: #4169E1;
display: block;
position: relative;
float: left;
width: 100%;
height: 50px;
}
ul li input[type=radio] {
position: absolute;
visibility: hidden;
}
ul li label {
display: block;
position: relative;
float: left;
font-weight: 300;
font-size: 1.35em;
padding: 25px 25px 25px 25px;
margin: 1px auto;
height: 30px;
z-index: 9;
cursor: pointer;
-webkit-transition: all 0.25s linear;
}
ul li:hover label {
color: #6495ED;
}
ul li .check {
display: block;
position: absolute;
border: 5px solid #4169E1;
border-radius: 100%;
height: 21px;
width: 21px;
top: 30px;
/*left: 40px;*/
z-index: 5;
transition: border .25s linear;
-webkit-transition: border .25s linear;
}
ul li:hover .check {
border: 5px solid #6495ED;
}
ul li .check::before {
display: block;
position: absolute;
content: '';
border-radius: 100%;
height: 9px;
width: 9px;
top: 1px;
right: 1px;
left: 1.05px;
bottom: 1.05px;
margin: auto;
transition: background 0.25s linear;
-webkit-transition: background 0.25s linear;
}
input[type=radio]:checked~ .check {
border: 5px solid #0000FF;
}
input[type=radio]:checked~ .check::before {
background: #0000FF;
}
input[type=radio]:checked~ label {
color: #0000FF;
}
的HTML代码：
Option 1
Option 2
小提琴：https://jsfiddle.net/steLy9qe/ (其中无论出于何种原因被严重移位，看起来并不像在我的实际页)
2016-08-18
Roxanne
+0
检查你的代码，你有一些未关闭的标签
智能推荐
编译安装libmemcached库报错_weixin_33697898的博客-程序员宅基地
2019独角兽企业重金招聘Python工程师标准>>> ...
shell脚本基础、变量_中国味鲁花香的博客-程序员宅基地
shell脚本基础、变量 shell脚本基础知识要点掌握Shell脚本的基础知识学会使用Shell变量学会编写简单的Shell脚本 Shell脚本的应用环境学习shell脚本的基本流程看、想、写shell脚本用在什么地方编写常用系统维护工具菜单重要的性能参数、进程和日志分析自动实现数据备份计划自动批量搭建特定系统环境防火墙自动配置脚本服务器的配置文...
以太坊开发者达成共识推迟Constantinople硬分叉至2019年1月_区块链铅笔的博客-程序员宅基地
点击上方“蓝色字”可关注我们！暴走时评：以太坊（ETH）的核心开发人员已达成共识，推迟计划的Constantinople协议硬分叉至2019年1月。硬分叉名为“Const...
flutterpiechart_flutter 做一个带线指示的饼状图_weixin_39531834的博客-程序员宅基地
是一个饼状图，但是不适用，因为数据比较多的时候显示就很密集，所以要用线，添加了一些，不过目前文字大小还没怎么计算，所以是写固定的整个代码如下import 'package:flutter/material.dart';import 'piechart.dart';import 'PieData.dart';import 'dart:math';class View extends CustomPa...
how to dump oracle block_zbdba的博客-程序员宅基地
首先我们来了解一下什么是rowid？Rowid 由对象号，数据文件号，数据块号，行号组成，如下图：现在我以scott用户下面的users表为例，没有的朋友可以自行创建测试select rowid,dbms_rowid.rowid_object(rowid)robject,dbms_rowid.rowid_relative_fno(rowid) fno,dbms_rowi
with root cause org.springframework.expression.spel.SpelEvaluationException* field ‘records‘ cannot_假期的学习的博客-程序员宅基地
1、 前言1.1 idae中spring boot项目使用thymeleaf模板，前端HTML页面获取后台Controller中的Model存放的数据1.2 项目在登录后跳转到后台显示查询到数据库数据的页面（首先是还没有查询，需要进入页面后点击按钮才去查询并显示）1.3 这里就直接报错误了，最开始我只能通过把查询到的数据显示到页面（就是刚刚登录成功，就跳转去查询数据）的方式解决错误，后面我发现一个好玩的方法，在这里介绍一下。2、 错误信息2.1主要错误2021-11-20 20:40:36.53
随便推点
Fiddler抓取HTTPs流量_weixin_34240520的博客-程序员宅基地
Fiddler抓取HTTPS流量的原理TLS是一种端到端的传输层加密协议，是HTTPS协议的一个组成部分。访问HTTPS站点时，HTTP请求、响应都通过TLS协议在浏览器和服务器之间加密传输，并且通过数字证书技术保证数据的保密性和完整性；任何“中间人”、包括代理服务器都只能转发数据，而无法窃听或者篡改数据。要抓取HTTPS流量的明文内容，Fiddler必须解密HTTPS流量。但是，浏...
Spring4.1新特性——数据库集成测试_jinnianshilongnian的博客-程序员宅基地
目录Spring4.1新特性——综述Spring4.1新特性——Spring核心部分及其他Spring4.1新特性——Spring缓存框架增强Spring4.1新特性——异步调用和事件机制的异常处理Spring4.1新特性——数据库集成测试脚本初始化Spring4.1新特性——Spring MVC增强Spring4.1新特性——页面自动化测试框架Spring MVC...
apk反编译源码与资源文件_火龙映天的博客-程序员宅基地_反编译apk资源文件
apk文件实际上是一个zip压缩包，将扩展名改为zip后可以直接解压。但是解压之后无法查看源码与资源文件，因为都是加密的。如果要查看源码与资源文件，就需要反编译。apk源码反编译工具有不少，下面介绍的是jadx。jadx是一款使用java语言开发并且开源的apk反编译工具。其github地址为：https://github.com/skylot/jadx。目前最新版本为：1.2.0。jadx支持常见的apk、dex、jar、class、smali、zip、aar、arsc格式文件，而且还支持jadx格
【android】半角符号与全角符号的转换_realizelizj的博客-程序员宅基地
一、应用场合1. android中用TextView显示文本信息的时候，经常会出现不对齐的现象，很不美观，因此，考虑将全角的符号转换为半角符号，或者半角符号转换为全角符号，达到文本对齐的效果2. 半角占一个字符，全角占两个字符二、
Office Web Components(OWC)绘图控件使用11个问答[转]_weixin_34072458的博客-程序员宅基地
OWC，即Office Web Components，是微软随Office提供的绘图控件，使用它能够绘制绝大部分的图形，但不幸的是 OWC的帮助文件并不好用，网上关于OWC的文章也都很简单，稍微深入一点的问题就很难搜到。所以，把自己研究OWC 的一些心得写在这里，希望能帮助有需要的朋友，使他们不必再去翻看长长的对象（属性、方法）列表。除此之外，也有一些功能还未实现...
SpringMVC面试题大总结_步尔斯特的博客-程序员宅基地_springmvc面试题
1、什么是Spring MVC ？简单介绍下你对springMVC的理解?2、SpringMVC的流程？3、Springmvc的优点:4、SpringMVC怎么样设定重定向和转发的？5、 SpringMVC常用的注解有哪些？6、SpingMvc中的控制器的注解一般用哪个？有没有别的注解可以替代？7、springMVC和struts2的区别有哪些?8、如何解决POST请求中文乱码问题，GET的又如何处理呢？9、SpringMvc里面拦截器是怎么写的：10、上传图片?11、SpringMvc怎么和AJA