[wp-trac] [WordPress Trac] #48269: WordPress beta 5.3 - Customizer - Height of input and select are not same.

[WordPress Trac]

#48269: WordPress beta 5.3 - Customizer - Height of input and select are not same.
-------------------------------+------------------------------
 Reporter:  veminom            |       Owner:  (none)
     Type:  defect (bug)       |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Customize          |     Version:
 Severity:  normal             |  Resolution:
 Keywords:  reporter-feedback  |     Focuses:  ui
-------------------------------+------------------------------

Comment (by veminom):

 Hello @dlh,

 Thank you for your response.

 **I don't see a min-height applied to input fields in the Customizer in
 WordPress 5.2; from what I can see, the input and select elements have
 different heights in 5.2, albeit not the same as those in 5.3.**

 - I'm sorry for not describing it properly. The issue seems to be with the
 input field type number.

 When I checked the input field type number, the below is the CSS I found
 for the input field type number:


 {{{
 WordPress 5.2:

 Input ( type - number ) -

 http://localhost/wp-new/wp-admin/css/customize-controls.css?ver=5.2.4

 .customize-control input[type="text"],
 .customize-control input[type="password"],
 .customize-control input[type="email"],
 .customize-control input[type="number"],
 .customize-control input[type="search"],
 .customize-control input[type="tel"],
 .customize-control input[type="url"] {
         width: 100%;
         line-height: 1.3;
         margin: 0;
 }

 http://localhost/wp-new/wp-admin/css/forms.css?ver=5.2.4

 /* Vertically align the number selector with the input. */
 input[type="number"] {
         height: 28px;
         line-height: 1;
 }
 }}}

 In the above CSS, the height of 28px is applying to the input type number.

 There seems to be no default WP theme with number field in it so I opened
 the Elements(HTML) editor of the page and renamed input type to **number**
 from **text**.

 Please see the screenshot below:
 https://cl.ly/49943d87bb60

 Now, for field select in WordPress 5.2 there is **height: 28px;**.

 {{{
 WordPress 5.2:

 Select -

 http://localhost/wp-new/wp-admin/css/customize-controls.css?ver=5.2.4

 .customize-control select {
     width: 100%;
     height: 28px;
     line-height: 2;
 }
 }}}

 Please see the screenshot below:
 https://cl.ly/38c1c0dbd7a6

 So it looks like the height for both Input type number and Select is same
 that is 28px in WordPress 5.2.


 # Now, coming to WordPress 5.3

 Same input type field number CSS:

 {{{
 WordPress 5.3:

 Input ( type - number ) -

 http://localhost/wp-beta-test/wp-admin/css/forms.css?ver=5.3-RC1-46558

 input[type="text"],
 input[type="password"],
 input[type="date"],
 input[type="datetime"],
 input[type="datetime-local"],
 input[type="email"],
 input[type="month"],
 input[type="number"],
 input[type="search"],
 input[type="tel"],
 input[type="time"],
 input[type="url"],
 input[type="week"] {
         padding: 0 8px;
         /* inherits font size 14px */
         line-height: 2; /* 28px */
         /* Only necessary for IE11 */
         min-height: 30px;
 }
 }}}

 Here the **min-height of 30px** is applied to the input field type number.

 Please see the screenshot below:
 https://cl.ly/d9a77327d738

 And for select field the below CSS is getting applied:


 {{{
 WordPress 5.3:

 Select -

 http://localhost/wp-beta-test/wp-admin/css/customize-
 controls.css?ver=5.3-RC1-46558

 .customize-control select {
     width: 100%;
     height: 28px;
     line-height: 2;
 }
 }}}

 Please see the screenshot below:
 https://cl.ly/f753bab78a23

 Here the height is applied to the select field of 28px due to which the
 height of Input type number is 2 pixels more than that of Select field.


 -------------------------

 In my opinion, both the heights should be the same.

 **what would be the reasons for making them the same?**
 - We should keep all the fields height the same as they were before. This
 new change of min-height 30 to input type number field is creating some UI
 issues because some of the themes use Input type number field with Select
 field in the same line which creates the height problem.

 For example, please check the Astra:

 Customizer -> Global -> Typography -> Headings ->

 Please see the screenshot below:
 https://cl.ly/bf53dece088f

 In the above screenshot you can see that the height for input type number
 and select is different in WP 5.3 beta version while it is equal in WP 5.2
 version

 - https://cl.ly/4ab87ef2666a


 Please let me know your thoughts.

 Thank you!


 Replying to [comment:1 dlh]:
 > Hi @veminom, and welcome to WordPress Trac!
 >
 > I don't see a `min-height` applied to `input` fields in the Customizer
 in WordPress 5.2; from what I can see, the `input` and `select` elements
 have different heights in 5.2, albeit not the same as those in 5.3.
 >
 > So, I'm not sure I see a regression. Separately, what would be the
 reasons for making them the same?

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