Question

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

我想要两个单选按钮来快进/快退。

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

如何将它们设置为显示为所选单选按钮的按下状态的按钮？

Answer 1

这是您可以调整以满足您需求的基本示例

＆＃13;

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

＆＃13;

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

＆＃13;

materializecss样式单选按钮作为按钮

1 个答案: