CODEWITHSUNDEEP
cssangularjshtml
antish Gajwani
antish Gajwani

Reputation: 70

Having trouble to override checkbox in angularjs

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');
}

Upvotes: 0

Views: 153

Answers (1)

TheSaint
TheSaint

Reputation: 26

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!

Upvotes: 1

Related Questions