CSS: Field Editor: Check Box Style

  • 1
  • Question
  • Updated 4 years ago
Is there a way to identify all checkboxes for field editors in CSS?  Basically, I want to be able to lock the checkboxes to always display the box beside the label (display: -webkit-inline-box;) regardless of the style of other items in the field editor.  It appears that I need to edit the .nx-basicfieldeditor-item element, but I'm not certain of the syntax for only adjusting checkboxes.  Can this be done?
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb

Posted 4 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
just learned it. Slick little thing to do.

input[type='checkbox']{  

}

Check this post out as well.

http://cssdeck.com/labs/css-checkbox-styles
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Cascading first by field editor. .nx-editor-contents 

.nx-editor-contents input[type='checkbox'] {

}
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Very cool Pat.  Thanks for passing along. 
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
For some reason I can't get this to work.  I've tried multiple variations, but the checkboxes are not aligned properly.

.nx-editor-contents input[type='checkbox'] {
     -webkit-inline-box;}

Anything else I'm missing?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
.nx-editor-contents input[type='checkbox'] {
display: -webkit-inline-box;
}
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
sorry:

.nx-editor-contents input[type='checkbox'] {
     display:-webkit-inline-box;}

also:

.nx-basicfieldeditor-item input[type='checkbox'] {
     display:-webkit-inline-box;}
(Edited)
Photo of Scott

Scott

  • 2,722 Points 2k badge 2x thumb
Sorry Pat - I had the "display:" as well...