Skip to content

[CSS] Fix input with addon border radius in themes

Nicolas Frandeboeuf requested to merge nicofrand/kresus:fixBorderRadius into master

OK, so… We still have an issue with border radius on the inputs in input-with-addon, this time when the input has the focus.

I am really sorry for the mess.

To recap: to avoid adding any style to the file inputs (we don't want the same box-shadow, borders etc. than for the text inputs), I added :not([type="file"]) to the input an input:focus rules. By doing so I added priority/precedence to those rules (while the pseudo-class :not() adds no specificity by itself, what's inside it's parentheses does). This increased priority made useless the general rule defined in input-with-addon.css:

.input-with-addon > *:focus {
    border-radius: 0;
}

So, to avoid any further issue due to this precendence matter I reverted the addition of :not([type="file"]) to keep selectors simple and instead I cleared the unwanted styles on the file inputs directly:

input[type='file'],
input[type='file']:focus {
    border: none;
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

Merge request reports