[Form] Native drop-down selection in error field has inconsistent size

[ko2in]

Bug Report

The native drop-down selection within field error has inconsistent size and changing it's width and height when the mouse focus somewhere on the page. It also causes the other component around being inconsistent in the page.

Steps to reproduce

1. Add field container with <select> in it. The select element shouldn't have special drop-down class ui dropdown.
2. Manipulate the field container to have error class, or add error class manually.
3. Now, click the <select> element and then click somewhere on the page

Expected result

The drop-down should react as naturally.

Actual result

The drop-down changes it's width and height and moves itself obviously and other components around.

Testcase

https://jsfiddle.net/nr7sgu5f/

Screenshot

Version

2.7.2

[y0hami]

This seems to be due to the error state changing the padding or something once the element is focused.

[ko2in]

This causes by the following CSS.

.ui.form .field.error input:not([type]):focus, .ui.form .field.error input[type=date]:focus, .ui.form .field.error input[type=datetime-local]:focus, .ui.form .field.error input[type=email]:focus, .ui.form .field.error input[type=file]:focus, .ui.form .field.error input[type=number]:focus, .ui.form .field.error input[type=password]:focus, .ui.form .field.error input[type=search]:focus, .ui.form .field.error input[type=tel]:focus, .ui.form .field.error input[type=text]:focus, .ui.form .field.error input[type=time]:focus, .ui.form .field.error input[type=url]:focus, .ui.form .field.error select:focus, .ui.form .field.error textarea:focus {
    background: #fff6f6;
    border-color: #e0b4b4;
    color: #9f3a38;
    -webkit-appearance: none; 
    -webkit-box-shadow: none;
    box-shadow: none;
}

Maybe, it's safe to remove -webkit-appearance: none? I'm not sure how much it can effect to the other usages.