I need to adjust the width of a select HTML box without using css, is there a way? I tried size but then it's adjusting the height, and width does nothing? Is there another way?
4
-
1Why are you trying to control the presentation of a webpage without using the presentation language of the web?Quentin– Quentin2009-09-11 15:20:51 +00:00Commented Sep 11, 2009 at 15:20
-
With presentation language you mean CSS? Since I thought maybe I missed some HTML option that is available to use.Elitmiar– Elitmiar2009-09-12 10:18:26 +00:00Commented Sep 12, 2009 at 10:18
-
2Yes. CSS is the language designed to describe how webpages (and other markup documents) should look. HTML is designed to describe structure, semantics and relationships. It has some (mostly deprecated) presentational stuff left over from the browser wars of the '90s.Quentin– Quentin2009-09-12 16:00:06 +00:00Commented Sep 12, 2009 at 16:00
-
are you hoping to use javascript to do it?rogerdpack– rogerdpack2017-04-21 21:26:59 +00:00Commented Apr 21, 2017 at 21:26
Add a comment
|
6 Answers
There is no way to do it in pure HTML as per http://www.w3.org/TR/html401/interact/forms.html#h-17.6. You can set it using the style element, though which is kind of without css in that it is inline.
<select style="width: ....
Comments
<style type="text/css">
select {
width:200px;
}
</style>
Does that not work?
1 Comment
Elitmiar
Looks like I need to stick with inline styles or css
If u using jquery, Maths Physics Chemistry
This is my select html code. So u have to add another div which contains jquery class name including your class name and apply height and width in your class.
<div class="ui-select selBox">
<select>
<option>Maths</option>
<option>Physics</option>
<option>Chemistry</option>
</select>
</div>
.selBox{
width: 470px !important;
height: 40px !important;
}
here selBox is my class name and ui-select is jquery class name.
1 Comment
Eoin
Your solution doesn't contain any jQuery
Change the font-size
<select name="ships" id="ship-select" class="ships" style="font-size: 2rem;">
Comments
select
{
width: 100%;
height: 42px;
}
Add this class to your style tag. It works fine.
2 Comments
Eric Aya
Basically the same solution as the accepted answer from 2009. You have just added an unrelated height parameter.
tolanj
As you are a new user this is some guidance on the site. Please don't answer questions, particularly those with an accepted answer, without reviewing the existing answers and ensuring your answer would bring something new. You should probably delete this answer.