CODEWITHSUNDEEP
css
morne
morne

Reputation: 4189

Setting CSS style of a class based on focus of another

Is it possible to change the style of a different class (TicCell) based on FOCUS of another (RadioTic)

.
.
<td>
  <table>
    <tr>
      <td class="TicCell"><input type="checkbox" class="RadioTic" name="some_field"></td>
    </tr>
  </table>
</td>
.
.

Ive got this in my head.

.RadioTic:focus{
  .TicCell{
  background: #FCFFBA;
  border: 2px solid #FCFFBA; 
  }
}

Upvotes: 0

Views: 241

Answers (2)

morne
morne

Reputation: 4189

So it seems the answer is NO, but here is some JQuery that does the trick.

        $('.RadioTic').focus(function() {
            $('.TicCell').css('background-color', '#FCFFBA');
            $('.TicCell').css('border', '2px solid #e2e5a7');
        });
        $('.RadioTic').blur(function() {
          $('.TicCell').css('background-color', '#FFFFFF');
          $('.TicCell').css('border', 'none');
        });

Upvotes: 2

bot
bot

Reputation: 4921

Sorry I dont understand what do you mean by focus. Anyway why not do it like this:
w/o focus 

 .RadioTic,
    .TicCell{
      background: #FCFFBA;
      border: 2px solid #FCFFBA; 
    }

or w/ focus

.RadioTic:focus,
.TicCell{
  background: #FCFFBA;
  border: 2px solid #FCFFBA; 
}

two class with the same design.

Upvotes: 1

Related Questions