多選框(checkbox) 與單選框(radio)的基本自定樣式

不使用框架與樣版，針對最基本的 DOM 元素去製作樣式。

<h3>單選框(radio)</h3>
<h4>送達時間：</h4>
<label>
	<input type="radio" id="Checkbox0-1" name="radio2" value="option2-1" checked>上午 80:30 ~ 11:30
</label>
<label>
	<input type="radio" id="Checkbox0-2" name="radio2" value="option2-2">中午 12:30 ~ 13:30
</label>
<label>
	<input type="radio" id="Checkbox0-3" name="radio2" value="option2-3" disabled>下午 14:30 ~ 18:30
</label>

<h3>多選框(checkbox)</h3>
<h4>寄送貨物類型</h4>
<label>
	<input type="checkbox" value="" checked> 運動用品
</label>
<label>
	<input type="checkbox" value=""> 汽車用品
</label>
<label>
	<input type="checkbox" value="" disabled> 腳踏車用品
</label>

<h3>單選框(radio)</h3>

<label>

<input type="radio" id="Checkbox0-1" name="radio2" value="option2-1" checked>上午 80:30 ~ 11:30

</label>

<label>

<input type="radio" id="Checkbox0-2" name="radio2" value="option2-2">中午 12:30 ~ 13:30

</label>

<label>

<input type="radio" id="Checkbox0-3" name="radio2" value="option2-3" disabled>下午 14:30 ~ 18:30

</label>

<h3>多選框(checkbox)</h3>

<h4>寄送貨物類型</h4>

<label>

<input type="checkbox" value="" checked> 運動用品

</label>

<label>

<input type="checkbox" value=""> 汽車用品

</label>

<label>

<input type="checkbox" value="" disabled> 腳踏車用品

</label>

html{
	font-size: 15px;
}
body{
	color: #999;
	text-align: center;
}
h3{
	font-weight: normal;
	font-size: 2rem;
	margin-top: 0.2;
	margin-bottom: 0.5rem;
	color: #000;
}
h4{
	font-size: 1.4rem;
	font-weight: normal;
	margin-top: 0.2;
	margin-bottom: 0.0rem;
}

label{
	cursor: pointer;
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
	margin-left: 0.5em;
}





input{
	cursor: pointer;
	
	// 修正 chrome 點後會出現 focus 的狀態
	&[type=checkbox]:focus, 
	&[type=radio]:focus {
		outline: 0px auto rgba(0,0,0,0);
		outline-offset: -2px;
	}
	
	&[type="radio"],&[type="checkbox"]{
		&:disabled{
			background-color: #cccccc;
			cursor: not-allowed;
		}	
	}
	&[type="radio"]{
		width: 1.6rem;
		height: 1.6rem;
		display: inline-block;
		min-height: auto;
		padding: 0px;
		margin: 1em .2em;
		vertical-align: middle;
		border: 1px solid #ccc;
		border-radius: 50%;
		background-clip: border-box;
		// -webkit-appearance 與 -moz-appearance 屬性不能少不然不能實現自定樣式
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-color: #fff;
		position: relative;
		cursor: pointer;
		line-height: normal;

		&:checked::before {
			border: 1px solid #158983;
			background-color: #158983;
			height: 50%;
			width: 50%;
			border-radius: 50%;
			margin: auto;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			position: absolute;
		}

		&::before {
			content: '';
			display: block;
			height: 0;
			width: 0;
			transition: width .25s,height .25s;
		}
	}
	&[type="checkbox"]{
		position: relative;
		display: inline-block;
		width: 1.4rem;
		height: 1.4rem;
		background-clip: border-box;
		// -webkit-appearance 與 -moz-appearance 屬性不能少不然不能實現自定樣式
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		margin: 1em .2em;
		vertical-align: middle;
		border-radius: 3px;
		transition: background-color .25s;
		background-color: #fff;
		border: 1px solid #d7d7d7;
		ursor: pointer;
		
		&:checked {
			background-color: #158983;
			border-color: #158983;
			
			&::after{
				content: '';
				display: block;
				height: 40%;
				width: 70%;
				border: 0 solid #333;
				border-width: 0 0 .2em .2em;
				transform: rotate(-45deg);
				position: absolute;
				border-color: #fff;
				margin: auto;
				top: -20%;
				bottom: 0;
				left: 0;
				right: 0;
			}
		}
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

html{

font-size: 15px;

}

body{

color: #999;

text-align: center;

}

h3{

font-weight: normal;

font-size: 2rem;

margin-top: 0.2;

margin-bottom: 0.5rem;

color: #000;

}

h4{

font-size: 1.4rem;

font-weight: normal;

margin-top: 0.2;

margin-bottom: 0.0rem;

}

label{

cursor: pointer;

display: inline-block;

max-width: 100%;

vertical-align: middle;

margin-left: 0.5em;

}

input{

cursor: pointer;

// 修正 chrome 點後會出現 focus 的狀態

&[type=checkbox]:focus,

&[type=radio]:focus {

outline: 0px auto rgba(0,0,0,0);

outline-offset: -2px;

}

&[type="radio"],&[type="checkbox"]{

&:disabled{

background-color: #cccccc;

cursor: not-allowed;

}

&[type="radio"]{

width: 1.6rem;

height: 1.6rem;

display: inline-block;

min-height: auto;

padding: 0px;

margin: 1em .2em;

vertical-align: middle;

border: 1px solid #ccc;

border-radius: 50%;

background-clip: border-box;

// -webkit-appearance 與 -moz-appearance 屬性不能少不然不能實現自定樣式

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

background-color: #fff;

position: relative;

cursor: pointer;

line-height: normal;

&:checked::before {

border: 1px solid #158983;

background-color: #158983;

height: 50%;

width: 50%;

border-radius: 50%;

margin: auto;

top: 0;

bottom: 0;

right: 0;

left: 0;

position: absolute;

}

&::before {

content: '';

display: block;

height: 0;

width: 0;

transition: width .25s,height .25s;

}

&[type="checkbox"]{

position: relative;

display: inline-block;

width: 1.4rem;

height: 1.4rem;

background-clip: border-box;

// -webkit-appearance 與 -moz-appearance 屬性不能少不然不能實現自定樣式

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

margin: 1em .2em;

vertical-align: middle;

border-radius: 3px;

transition: background-color .25s;

background-color: #fff;

border: 1px solid #d7d7d7;

ursor: pointer;

&:checked {

background-color: #158983;

border-color: #158983;

&::after{

content: '';

display: block;

height: 40%;

width: 70%;

border: 0 solid #333;

border-width: 0 0 .2em .2em;

transform: rotate(-45deg);

position: absolute;

border-color: #fff;

margin: auto;

top: -20%;

bottom: 0;

left: 0;

right: 0;

}

See the Pen 多選框(checkbox) 與單選框(radio)的基本自定樣式 by Jimmy_Wu (@Jimmy_Wu) on CodePen.light

switch checkbox

<div class="switch">
	<input name="toggle" type="checkbox">
	<label for="toggle"><i></i></label>
	<span></span>
</div>

</div>

body {
background: #444444;
}

.switch input {
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.switch {
	width: 180px;
	height: 55px;
	position: relative;
	margin: 100px auto;
}

.switch label {
	display: block;
	width: 80%;
	height: 100%;
	position: relative;
	background: #1F2736; /*#121823*/
    background: linear-gradient(#121823, #161d2b);
	border-radius: 30px 30px 30px 30px;
	box-shadow:
        inset 0 3px 8px 1px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(0,0,0,0.5),
        0 1px 0 rgba(255,255,255,0.2);
		-webkit-transition: all .5s ease;
transition: all .5s ease;

}

.switch input ~ label i {
    display: block;
    height: 51px;
    width: 51px;
    position: absolute;
    left: 2px;
    top: 2px;
    z-index: 2;
    border-radius: inherit;
    background: #283446; /* Fallback */
    background: linear-gradient(#36455b, #283446);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 8px rgba(0,0,0,0.3),
        0 12px 12px rgba(0,0,0,0.4);
	-webkit-transition: all .5s ease;
transition: all .5s ease;
}


.switch label + span {
	content: "";
	display: inline-block;
	position: absolute;
	right: 0px;
	top: 17px;
	width: 18px;
	height: 18px;
	border-radius: 10px;
	background: #283446; 
background: gradient-gradient(#36455b, #283446);
box-shadow:
		  inset 0 1px 0 rgba(0,0,0,0.2),
  		0 1px 0 rgba(255,255,255,0.1),
  		0 0 10px rgba(185,231,253,0),
  inset 0 0 8px rgba(0,0,0,0.9),
  inset 0 -2px 5px rgba(0,0,0,0.3),
  inset 0 -5px 5px rgba(0,0,0,0.5);
 	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 2;
}

 /* Toggle */
.switch input:checked ~ label + span { 
	content: "";
	display: inline-block;
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 10px;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	z-index: 2;
	background: #b9f3fe; 
background: gradient-gradient(#ffffff, #77a1b9);
box-shadow:        
		  inset 0 1px 0 rgba(0,0,0,0.1),
		  0 1px 0 rgba(255,255,255,0.1),
		  0 0 10px rgba(100,231,253,1),
		  inset 0 0 8px rgba( 61,157,247,0.8),
  inset 0 -2px 5px rgba(185,231,253,0.3),
  inset 0 -3px 8px rgba(185,231,253,0.5);

 }

.switch input:checked ~ label i {
    left: auto;
    left: 63%;
	box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 0 8px rgba(0,0,0,0.3),
        0 8px 8px rgba(0,0,0,0.3),
		inset -1px 0 1px #b9f3fe;

	-webkit-transition: all .5s ease;
transition: all .5s ease;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

body {

background: #444444;

}

.switch input {

top: 0;

right: 0;

bottom: 0;

left: 0;

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

-moz-opacity: 0;

opacity: 0;

z-index: 100;

position: absolute;

width: 100%;

height: 100%;

cursor: pointer;

}

.switch {

width: 180px;

height: 55px;

position: relative;

margin: 100px auto;

}

.switch label {

display: block;

width: 80%;

height: 100%;

position: relative;

background: #1F2736; /*#121823*/

background: linear-gradient(#121823, #161d2b);

border-radius: 30px 30px 30px 30px;

box-shadow:

inset 0 3px 8px 1px rgba(0,0,0,0.5),

inset 0 1px 0 rgba(0,0,0,0.5),

0 1px 0 rgba(255,255,255,0.2);

-webkit-transition: all .5s ease;

transition: all .5s ease;

}

.switch input ~ label i {

display: block;

height: 51px;

width: 51px;

position: absolute;

left: 2px;

top: 2px;

z-index: 2;

border-radius: inherit;

background: #283446; /* Fallback */

background: linear-gradient(#36455b, #283446);

box-shadow:

inset 0 1px 0 rgba(255,255,255,0.2),

0 0 8px rgba(0,0,0,0.3),

0 12px 12px rgba(0,0,0,0.4);

-webkit-transition: all .5s ease;

transition: all .5s ease;

}

.switch label + span {

content: "";

display: inline-block;

position: absolute;

right: 0px;

top: 17px;

width: 18px;

height: 18px;

border-radius: 10px;

background: #283446;

background: gradient-gradient(#36455b, #283446);

box-shadow:

inset 0 1px 0 rgba(0,0,0,0.2),

0 1px 0 rgba(255,255,255,0.1),

0 0 10px rgba(185,231,253,0),

inset 0 0 8px rgba(0,0,0,0.9),

inset 0 -2px 5px rgba(0,0,0,0.3),

inset 0 -5px 5px rgba(0,0,0,0.5);

-webkit-transition: all .5s ease;

transition: all .5s ease;

z-index: 2;

}

/* Toggle */

.switch input:checked ~ label + span {

content: "";

display: inline-block;

position: absolute;

width: 18px;

height: 18px;

border-radius: 10px;

-webkit-transition: all .5s ease;

transition: all .5s ease;

z-index: 2;

background: #b9f3fe;

background: gradient-gradient(#ffffff, #77a1b9);

box-shadow:

inset 0 1px 0 rgba(0,0,0,0.1),

0 1px 0 rgba(255,255,255,0.1),

0 0 10px rgba(100,231,253,1),

inset 0 0 8px rgba( 61,157,247,0.8),

inset 0 -2px 5px rgba(185,231,253,0.3),

inset 0 -3px 8px rgba(185,231,253,0.5);

}

.switch input:checked ~ label i {

left: auto;

left: 63%;

box-shadow:

inset 0 1px 0 rgba(255,255,255,0.2),

0 0 8px rgba(0,0,0,0.3),

0 8px 8px rgba(0,0,0,0.3),

inset -1px 0 1px #b9f3fe;

-webkit-transition: all .5s ease;

transition: all .5s ease;

}

See the Pen switch checkbox by Jimmy_Wu (@Jimmy_Wu) on CodePen.light

原意筆記本

其他操作

標籤雲

文章段落

多選框(checkbox) 與單選框(radio)的基本自定樣式

switch checkbox

原意筆記本

其他操作

標籤雲

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; }文章段落

多選框(checkbox) 與單選框(radio)的基本自定樣式

switch checkbox

文章段落