How to set the Width of Select Options in HTML & CSS

# Table of Contents

# How to set the Width of Select Options in HTML & CSS

Set the width CSS property of the select element and its option elements to set the width of a select dropdown using CSS.

If setting the property has no effect, you might have to use the !important flag.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      select {
        width: 300px;
      }

      select option {
        width: 300px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <select name="languages" id="language-select">
      <option value="">--Choose an option--</option>
      <option value="javascript">JavaScript</option>
      <option value="typescript">TypeScript</option>
      <option value="python">Python</option>
      <option value="java">Java</option>
      <option value="php">PHP</option>
      <option value="php">
        A very long select option abc 123
      </option>
    </select>
  </body>
</html>

set width of select dropdown using css

The code for this article is available on GitHub

Notice that we set the width of the select element and all of its option elements to the same value - 300px.

style.css

Copied!
select {
  width: 300px;
}

select option {
  width: 300px;
}

If setting the width has no effect in your case, you might have to use the !important flag.

style.css

Copied!
select {
  width: 300px !important;
}

select option {
  width: 300px !important;
}

The !important flag allows you to override styles that have higher precedence.

You will most likely want to set the width of the select and its option elements to the same value.

Here is an example of setting the width of the select element and its option elements to different values.

style.css

Copied!
select {
  width: 150px;
}

select option {
  width: 300px;
}

width of select greater than option elements

Setting the width of the select element to a lower value than the width of the option elements is most likely not what you want.

When a wider option is selected, its value is truncated.

Here is an example that sets the width of the select element to 300px and the width of its option elements to 150px.

style.css

Copied!
select {
  width: 300px;
}

select option {
  width: 150px;
}

setting width of option elements to greater value

The code for this article is available on GitHub

# The `width` of your `option` elements might exceed the width of your `select`

In some cases, you might have very wide option elements.

very wide option elements

You can try to set the max-width CSS property on the select element but this likely won't work.

style.css

Copied!
select {
  width: 300px;
  max-width: 300px;
}

Most browsers will still want to display the entire text of the option element, so setting the width CSS property might not have an effect.

In these cases, it's best to use JavaScript to trim the text of the option element.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      body {
        margin: 100px;
      }

      select {
        width: 300px;
      }
    </style>
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <select name="languages" id="language-select">
      <option value="">--Choose an option--</option>
      <option value="javascript">JavaScript</option>
      <option value="typescript">TypeScript</option>
      <option value="python">Python</option>
      <option value="java">Java</option>
      <option value="php">PHP</option>
      <option value="php">
        bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
        bobbyhadz.com bobbyhadz.com bobbyhadz.com bobbyhadz.com
        bobbyhadz.com
      </option>
    </select>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Here is the code for the index.js file.

index.js

Copied!
const optionElements = document.querySelectorAll('option');

Array.from(optionElements).forEach(element => {
  if (element.textContent.length > 35) {
    element.textContent =
      element.textContent.slice(0, 35) + '...';
  }
});

working with wide option elements

We used the document.querySelectorAll method to select the option elements on the page.

We then converted the collection to an array using Array.from and used the Array.forEach to iterate over the array.

On each iteration, we check if the textContent of the current option element is greater than 35.

If the condition is met, we use the String.slice method to truncate the text to the first 35 characters and add an ellipsis ....

You might have to play around with the width of the select element and how many characters you want to display in your option elements depending on your use case.

# Set the Width of a Select Option in HTML & CSS using inline styles

If you weren't able to set the width of the select element and its options using external styles, try using inline styles.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <select
      name="languages"
      id="language-select"
      style="width: 240px"
    >
      <option style="width: 240px" value="">
        --Choose an option--
      </option>
      <option style="width: 240px" value="javascript">
        JavaScript
      </option>
      <option style="width: 240px" value="typescript">
        TypeScript
      </option>
      <option style="width: 240px" value="python">Python</option>
      <option style="width: 240px" value="java">Java</option>
      <option style="width: 240px" value="php">PHP</option>
      <option style="width: 240px" value="php">
        A very long select option abc 123
      </option>
    </select>
  </body>
</html>

set width of select dropdown using inline styles

The code for this article is available on GitHub

The example sets the width of the select element and its options using inline styles.

index.html

Copied!
<select
  name="languages"
  id="language-select"
  style="width: 240px"
>
  <option style="width: 240px" value="">
    --Choose an option--
  </option>
</select>

The width of both elements is set to 240px.

Inline styles have higher precedence than external stylesheets, so using this approach might work even if the previous approach didn't work.

If none of the suggestions worked, you can try to use the !important flag which has the highest precedence.

style.css

Copied!
select {
  width: 300px !important;
}

select option {
  width: 300px !important;
}

The code for this article is available on GitHub

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to set the Width of Select Options in HTML & CSS

# Table of Contents