Select option same width

Question

http://jsfiddle.net/73vbu0kg/

select {
  -moz-appearance: none;
  border: 1px solid #333;
  color: #999;
  display: inline-block;
  font-size: 12px;
  height: 39px;
  padding: 0 15px;
  vertical-align: top;
  width: 218px;
}
select option {
  padding: 7px 15px;
}

Why option field is wider than select? How do you fit it to same width both select and option with same text padding?

Answer 1

change your style as below

select option {
  padding: 7px 4px;
}

Answer 2

The reason you have hidden overflow on the text id because in your CSS you are giving the select a fixed width . If you remove the width it will expand to the width it needs to display all of the option values. If you don't want the select bigger then that leaves you with changing the font-size

 select { -moz-appearance: none; border: 1px solid #333; color: #999; display: inline-block; font-size: 12px; height: 39px; padding: 0 15px; vertical-align: top; } select option { padding: 7px 15px; } 

 <select> <option selected="selected" value="">Please select one:</option> <option value="1">Prayer Requests</option> <option value="2">Financial Assistance</option> <option value="3">Life, Illness & Loss</option> <option value="4">Marriage, Relationship & Family</option> <option value="5">Life Controlling Issues & Addictions</option> <option value="6">Counseling & Life Improvement</option> <option value="7">Other</option> </select>