CODEWITHSUNDEEP
htmlcss
timothy5597
timothy5597

Reputation: 13

Style <select> inside <form>

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.

Upvotes: 1

Views: 336

Answers (3)

symlink
symlink

Reputation: 12209

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>

Upvotes: 0

Dupinder Singh
Dupinder Singh

Reputation: 7759

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

Upvotes: 1

norbitrial
norbitrial

Reputation: 15166

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.

Upvotes: 2

Related Questions