Skip to content

Instantly share code, notes, and snippets.

@viko16

viko16/radio.html

Created August 20, 2014 17:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save viko16/b323bedb7d9065a077dc to your computer and use it in GitHub Desktop.
Save viko16/b323bedb7d9065a077dc to your computer and use it in GitHub Desktop.
Download ZIP
漂亮的单选题目样式 #html
Raw
radio.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>漂亮的单选题目样式</title>
<style>
input[type=radio] {
-webkit-appearance: none;
appearance: none;
margin: 0;
margin-right: 5px;
cursor: pointer;
vertical-align: bottom;
border: 1px solid #08c;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: relative;
-webkit-border-radius: 2em;
border-radius: 2em;
width: 35px;
height: 35px;
background: #fff;
}
input[type=radio]::after{
display: block;
position: relative;
font-size: 1.4em;
left: 10px;
width: 1.4em;
color: #08c;
line-height: 34px;
border-radius: 200px;
}
input[type=radio]:checked {
background-color: #08c;
color: #fff;
}
input[type=radio]:checked::after {
color: #fff;
-webkit-border-radius: 1em;
border-radius: 1em;
}
input[type=radio]:focus{
outline: none;
}
input[type=radio].options-a::after{
content: 'A';
}
input[type=radio].options-b::after{
content: 'B';
}
input[type=radio].options-c::after{
content: 'C';
}
input[type=radio].options-d::after{
content: 'D';
}
label {
display: block;
margin: 20px;
line-height: 2.3em;
word-break:break-all;
word-wrap:break-word;
}
</style>
</head>
<body>
<div id="aaa">
<label>
<input type="radio" value="Option one" name="group" class="options-a">
Option1Option1
</label>
<label>
<input type="radio" value="Option one" name="group" class="options-b">
Option2Option2
</label>
<label>
<input type="radio" value="Option one" name="group" class="options-c">
Option3Option3
</label>
<label>
<input type="radio" value="Option one" name="group" class="options-d">
Option4Option4
</label>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment