[wp-trac] [WordPress Trac] #37439: Why is "input_attrs" attribute not used in Customizer checkbox, radio, select, textarea controls?

[WordPress Trac]

#37439: Why is "input_attrs" attribute not used in Customizer checkbox, radio,
select, textarea controls?
-------------------------+-------------------------
 Reporter:  Collizo4sky  |       Owner:
     Type:  enhancement  |      Status:  closed
 Priority:  normal       |   Milestone:
Component:  Customize    |     Version:  4.6
 Severity:  normal       |  Resolution:  maybelater
 Keywords:               |     Focuses:  ui
-------------------------+-------------------------

Comment (by jrobertblack):

 Replying to [comment:18 westonruter]:
 > @jrobertblack what is your use case? Can you elaborate? Share your
 existing code?

 I am trying to set up columns on some parts. I was just putting the ids in
 css file and make the columns that way, but it took too long and adding
 new ones was a pain.. With hundreds of settings its very useful to have
 target groups for styling. If you have padding or some smaller settings,
 breaking those little numbers up into 4 or 3 columns makes it much easier
 to read and use.

 I was searching again for class options and found this "input_attrs"
 settings and was excited I could add in classes. Although I have to use
 jquery to add another class two parents up, it worked fine. I also could
 insert "px" text after a bunch of number entries so the user knew it was
 in px and they didnt need to add it.

 I added this to the main file.

 {{{
   'input_attrs' => array( 'class' => 'ev-px ev-third' ),
 }}}

 then I used the "customize_controls_print_scripts" to load a js file with
 this in it.


 {{{
         jQuery( ".ev-px" ).parent().append( "px" )
         jQuery( ".ev-third" ).parent().parent().addClass( "ev-third-
 trigger" );
 }}}

 then I used the "customize_controls_print_styles" to load a css file with
 this in it.


 {{{
 .customize-control .ev-px {
         width: calc(100% - 22px) !important;
 }
 .customize-control .ev-third-trigger {
         width: 30% ;
         float: left ;
         clear: none ;
         margin-right: 3% ;
 }
 }}}

 It all works great for the text boxes, but when I tried it on the selects
 and others it sadly didnt work. right now im half using this way and half
 targeting id on the other half.

 Obviously I would like to add a class to the main li container of each
 entry so I would not have use js, I could even add the "px" using css
 :after instead of the js append, but either way I would be happy.

 Am i missing another setting to set classes, I really surprised i cant do
 this. My customizer.css file is 1500 lines long now with you classes!

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37439#comment:19>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform