我尝试设计视频控件的样式。
我想要两个用于快进/快退的单选按钮。
<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;
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">
<input type="radio" name="unemployment">
<span>I</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>need</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>a</span>
</label>
<label class="white">
<input type="radio" name="unemployment">
<span>job</span>
</label>
</div>
</body>
</html>关于css - MaterializeCSS 样式单选按钮作为按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41417939/