CODEWITHSUNDEEP
htmlcssinputdrop-down-menu
coddding
coddding

Reputation: 343

setting width of select tag not working

I've tried nearly EVERYTHING that could be found about this on stackoverflow e.g.

<select style="width:50px;">
//all my select options and stuff would be here

&

<select class="pleasekillme">
//all my select options and stuff would be here

<style>
.pleasekillme {
width: 50px;
}
</style>

&

<select width="50">
//all my select options and stuff would be here

And I've tried a few more but nothing is working, please help.

Any help would be appreciated thanks

Upvotes: 1

Views: 6914

Answers (4)

andreas
andreas

Reputation: 16936

Have you checked your markup for errors? width on select tags should be working. You can use your browsers developer tools, if the width is overwritten by some other rules. In this case you can use !important, but that's not recommanded.

.first {
  width: 100px;
}
.second {
  width: 200px;
}
<select class="first">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

<select class="second">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

See this question for more information about styling select tags.

Upvotes: 2

Vivekraj K R
Vivekraj K R

Reputation: 2548

It works perfectly chcek Fiddle.Try giving !important.

.pleasekillme {
   width: 50px !important;
 }

Upvotes: 1

hdotluna
hdotluna

Reputation: 5732

https://jsfiddle.net/ewa59apq/

<select id="test">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</select>

css

select {
  width: 50px;
  background: red;
}

Check if what's the width via js

var testing = document.getElementById('test');

alert(window.getComputedStyle(testing).getPropertyValue('width'));

Upvotes: 1

Jesse Elser
Jesse Elser

Reputation: 976

Works fine for me using

select {
 width: 500px;
}

Heres a simple JsFiddle of it working: https://jsfiddle.net/un67fLxa/

Upvotes: 2

Related Questions