Having trouble to override checkbox in angularjs

Question

I am trying to override checkbox css in angular.js .It works fine for normal javascript code.

Plunker : https://plnkr.co/edit/gkWm0lgEZ7N88TINcsRS?p=preview

If you remove the css it works fine.

<input type="checkbox" ng-model="checkboxModel.value1" >

CSS:

  input[type=checkbox]:checked + label:before {
  content: '';
  text-shadow: 1px 1px 1px #10758C;
  font-size: 24px;
  color: #f3f3f3;
  text-align: center;
  line-height: 24px;
  background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important;
}

label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 28px;
  margin-right: 12px;
  font-size: 16px;
  line-height: 22px;
  font-weight: bold;
}

input[type=radio], input[type=checkbox] {
  display: none;
}

label:before {
  font-weight: normal;
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_1.gif?v1');
}

To hide the original checkbox ,i.e hide the box of the checkbox — antish Gajwani
– antish Gajwani, Commented Mar 24, 2017 at 7:06
What do you actually want? On one hand you want to override css and on other hand you want to hide them. — Kiran Shinde
– Kiran Shinde, Commented Mar 24, 2017 at 7:08

TheSaint · Accepted Answer · 2017-03-24 10:24:49Z

1

The issue is that the '+' css selector used, is unable to find any matching DOM i.e the label is wrapping the input and no label is present following/after the input, as per the DOM structure in the Plunker link .

Approach 1: You could use the following DOM structure and modify your CSS to replace all occurrences of label to i

<label>
    <input />
    <i></i>
</label>

Approach 2: You could use the following DOM structure and modify your CSS to replace all occurrences of label to input + label (To avoid css being applied to the wrapper label). [Note this approach needs the checkbox to have an id and for the label following it to have a for attribute.]

<label>
   <input id="chk1" />
   <label for="chk1"></label>
</label>

Hope this helps!

answered Mar 24, 2017 at 10:24

TheSaint

261 bronze badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Having trouble to override checkbox in angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related