CODEWITHSUNDEEP
cssradio-buttonmaterialize
Chris
Chris

Reputation: 14198

materializecss style radio button as button

I try to style a video controls.

I want two radio buttons for fast forward / rewind. 

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

How can I style them to appear as buttons with pressed state for the selected radio button?

Upvotes: 2

Views: 1610

Answers (1)

Green Onyeji
Green Onyeji

Reputation: 259

This is a basic sample you can tweak to suit your needs

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

Upvotes: 2

Related Questions