CODEWITHSUNDEEP
htmlcssfocus
sandiie
sandiie

Reputation: 11

How to add focus on label css style

I'm trying to make an element that looks like a button with a radio button inside of it. When the user selects an option I would like to create an active state on the button with the background #CCC.

Here is the relevant code.

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

Upvotes: 1

Views: 665

Answers (1)

user4639281
user4639281

Reputation:

You can do this using javascript. I still haven't been able to find a way to do this with only CSS and HTML.

(Demo)

Using javascript you basically capture the click event then remove the class active from the currently active option, then add the active class to the clicked item's class definition

JAVASCRIPT

document.getElementById("button1").onclick = function(){
    document.getElementsByClassName("active")[0].className = 'butOption';
    this.className += ' active';
};
document.getElementById("button2").onclick = function(){
    document.getElementsByClassName("active")[0].className = 'butOption';
    this.className += ' active';
};

CSS

.active {
    background: #CCC;
}

Upvotes: 2

Related Questions