저는 비디오 컨트롤 스타일을 시도합니다.materializecss 스타일 라디오 버튼을 버튼으로 사용합니다.
빨리 감기/되감기를위한 두 개의 라디오 버튼이 필요합니다.
<input name="group1" type="radio" id="ff" />
<label for="ff"><i class="material-icons">fast_forward</i></label>
<input name="group1" type="radio" id="fr" />
<label for="fr"><i class="material-icons">fast_rewind</i></label>
선택한 라디오 버튼에 대해 눌려진 상태로 버튼으로 표시되도록하려면 어떻게 스타일링 할 수 있습니까?
이것은 당신이 당신의 요구
#help label {
float:left;
width:120px;
\t margin:0px;
background-color:#FFF;
border-radius:4px;
border:1px solid #D0D0D0;
overflow:auto;
}
#help label span {
text-align:center;
font-size: 16px;
padding:10px 0px;
display:block;
}
#help label input {
position:absolute;
top:-20px;
}
#help input:checked + span {
background-color:indigo;
color:white;
}
#help .white {
background-color:#FFFFFF;
color:#000;
}<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/fonts.css">
</head>
<body>
<div id="help" class="row halign">
<label class="white">
\t \t <input type="radio" name="unemployment">
\t \t <span>I</span>
\t </label>
<label class="white">
\t \t <input type="radio" name="unemployment">
\t \t <span>need</span>
\t </label>
<label class="white">
\t \t <input type="radio" name="unemployment">
\t \t <span>a</span>
\t </label>
<label class="white">
\t \t <input type="radio" name="unemployment">
\t \t <span>job</span>
\t </label>
</div>
</body>
</html>