search

vitalets / angular-xeditable

Edit in place for AngularJS
http://vitalets.github.io/angular-xeditable
MIT License
1.91k stars 403 forks source link

Styling Checkboxes #495

Closed EvanBurbidge closed 8 years ago

EvanBurbidge commented 8 years ago

Hey, one thing i've noticed is that the HTML for checkboxes is something like

<label>
   <input type='checkbox'>
</label>

But with this it makes it impossible to style the checkbox using custom CSS on an application. Is there anyway of updating the HTML to be something more like...

<label>
   <input type='checkbox'>
  <span class='editable-styler-span'></span>
</label>

This way the checkbox of browsers could be hidden + the span could be styled in order to give the checkbox the look / feel of the applications UI.

EvanBurbidge commented 8 years ago

If you use the following line of code in the render function of the ediableCheckbox directive it will allow a span to be present for styling purposes

          this.inputEl.parent().append("<span></span>");

Changing the part of the code to this will allow the span to be present in the HTML for styling.

ckosloski commented 8 years ago

Is this what you are looking for?

<label>
  <input type="checkbox" class="editable-has-buttons editable-input ng-pristine ng-valid ng-not-empty ng-touched" title="Remember?" ng-model="$parent.$data">
  <span>Remember?</span>
</label>