I'm attempting to create a button-like element with a radio button embedded within it. Upon selection of an option, I aim to trigger an active state on the button, changing its background color to #CCC.
Below is the relevant code snippet:
.butOption {
display: block;
width: 400px;
margin: 10px auto;
border: 1px solid #ccc;
border-radius: 5px;
}
.butOption:hover {
background-color: #ccc;
}
.butOption input {
margin: 20px;
float: left;
overflow: auto;
}<label class="butOption">
<div class="radioBut">
<input type="radio" name="item" value="" checked />
</div>
<div class="text">
<p>text</p>
<p>text</p>
</div>
</label>
<label class="butOption">
<div class="radioBut">
<input type="radio" name="item" value="" checked />
</div>
<div class="text">
<p>text</p>
<p>text</p>
</div>
</label>