How To Set Width Of Select Option In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Ashish
In this tutorial we will show the solution of how to set width of select option in HTML, in HTML there is a select tag that we use in form in html. There is also an option tag under select tag, these are under to create a drop-down list in html.
The select tag creates the required box whereas the option tag helps to shows the list under select tag. Sometimes a problem in which developers have to widen the select tag means have to increase the width of select tag.
So, to face this problem today we will help you to show how you able to set or customize the width of select tag in html.
Step By Step Guide On How To Set Width Of Select Option In HTML :-
As, we know that select is mostly used in forms. That’s the reason in next example we first create a form tag in html code and then select in this.
In select we use various option tags. You may able to as many options as you want.
Now, the next step is to customize width of select and options this can be done with the help of CSS, you can use any CSS which you want, but we here use Internal CSS and the example code of this is given below, after this we explain you how it works.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
select {
width: 500px;
margin: 20px;
}
option {
min-width: 500px;
}
</style>
</head>
<body>
<form>
<select>
<option>Choose what you want</option>
<option>This is first</option>
<option>This is second option tag</option>
<option>This is third and second last option</option>
<option>This option tag is last in this list and longer also</option>
</select>
</form>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags.
- So, both have </head> and </title> ending tags respectively. Before, closing our head tag here we use style tags as Internal CSS, the explanation of style attribute is given in our next point.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, as already we explain, that we create form tag, in under we create select tags and after this we create options.
- Now you see this, when you open the html file in browser without CSS code. The select tag is in default method and the long text does not appear fully in html.
- Also, sometimes due to webpage patterns, we want to increase width of tags. So, we give CSS to select and option tags, in this we set the width in pixel in select and minimum width in option.
- So, due to minimum limit in tags the width of select and option increases. You can decrease the width from default value using CSS, also.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, we can say that with CSS properties of select and option tags. We are able to customize the width of select.
Now, we can increase and also decrease the width of select tags with the help of this article. I hope this tutorial on how to set width of select option in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
