materializecss 样式单选按钮作为按钮答案

【问题标题】：materializecss style radio button as buttonmaterializecss 样式单选按钮作为按钮
【发布时间】：2018-01-12 01:43:37
【问题描述】：

我尝试设置视频控件的样式。

我想要两个用于快进/快退的单选按钮。

<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>

如何设置它们的样式，使其显示为选定单选按钮处于按下状态的按钮？

【问题讨论】：

标签： css radio-button materialize

【解决方案1】：

这是一个基本示例，您可以根据自己的需要进行调整

#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>

【讨论】：