Style <select> inside <form> - html

Question

I have some code like this:
<form>
<select name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
I tried doing the CSS in these ways:
[name="slctr__lvl1"] {
width: 150px;
}
and:
select {
width: 150px;
}
and:
font select {
width: 150px;
}
but none worked. I want it to look like I wrote:
<form>
<select name="slctr__lvl1" style="width: 150px">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
but the CSS seems to have no effect.

Answer 1

You can use CSS Attribute Selectors:
The [attribute="value"] selector is used to select elements with a specified attribute and value.
Try as the following:
form select[name="slctr__lvl1"] {
width: 150px;
}
<form>
<select name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>
You can also read further on MDN's Attribute selectors documentation.

Answer 2

CSS attribute selector needs HTML tag before attribute
CSS Attribute selector
https://www.w3schools.com/css/css_attribute_selectors.asp
CSS all selector types
https://www.w3schools.com/cssref/css_selectors.asp
have a look to the following example, I tried to make it work as you did, and if you compare my example with yours you will have the difference that why your code is not working
select[name=slctr__lvl1] {
background-color: yellow;
}
select{
color: red;
}
select {
width: 200px;
}
<select name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
PS: I didn't understand what you want to achieve with this.
font select {
width: 150px;
}
I think this is just a typo, You want to add form, not the font I think

Answer 3

Give the select box a class:
.selectBox{
width: 400px;
}
<form>
<select class="selectBox" name="slctr__lvl1">
<option selected>aaa</option>
<option value="1">1</option>
</select>
</form>