How to use desired CSS file property

Question

the SELECT element is "taking" the height property of a file. css . But Inputs "use" this same property of another css file ( which is the ideal file). And with this the height of the SELECT is smaller than the text inserted in the component : In the image the item 1 , SELECT is below the height of the letter ( is cutting the text ) Item 2 is SELECT - class form-control Item 3 shows that the height property is not being used there in the css file Item 4 shows where the height property is being searched. When I uncheck the height of item 4, then the component gets the height OK. How do I use the height property of the correct css file? And why does this happen ?

Answer 1

This happens due to hierarchical level of CSS you see in this link

You may be prioritizing heigth by using the tag: important so it will catch the most Important for the code

ex:

.form-contro{
   heigth: 100px !important;
}

Answer 2

Your select does not have the attribute size (:not[size]), nor the attribute multiple (:not[Multiple]), so it picks up the unwanted height.

If you put in your select any one of those attributes size and multiple the unwanted CSS rule is no longer applied, and it returns to the default height of the form-control

But notice that your select has a ID already. And any CSS declared in ID has preference, so an easy way to solve this is by putting the height on the ID for example. See a practical example to understand.

#teste {
	border: 1px solid #00f;
}
select.oi:not([xxx]):not([sss]) {
	border: 1px solid #f00;
}

pega a cor do ID<br>
<select name="" id="teste" class="oi">
	<option value="123">123</option>
</select>
<br>
é zzz é xxx não pega o css<br>
<select name="" zzz xxx class="oi">
	<option value="123">123</option>
</select>
<br>
Não é zzz nem xxx então fica vermelho<br>
<select name="" class="oi">
	<option value="123">123</option>
</select>

OBS: ! Important is to push the dirt under the tape, remember that now everything that uses the class that has ! You can’t change anymore... it can give you a lot of headache if you don’t know what you’re doing