CODEWITHSUNDEEP
htmlcss
Cesarg2199
Cesarg2199

Reputation: 579

HTML Select Padding Text Issue

I have a html select tag and added 25px of padding but when I do that the text disappears. How can I have the padding but the text still be visible?

Here is my code.

CSS

.signup-field {
  border-radius: 30px;
  padding: 25px;
}

HTML

<div class="col-sm-12 col-md-6"> <div class="form-group"> <h4 style="color:white; margin-left:20px; margin-bottom:10px;">How did you hear about us?</h4> <select class="form-control signup-field" style=""id="sel1"> <option>1</option> <option>2</option> </select> </div> </div>

Upvotes: 1

Views: 2541

Answers (2)

Cameron Scott
Cameron Scott

Reputation: 1306

Select elements don't respond to padding like another block-level elements—I wish I knew why. If you're looking to add vertical padding, you can simply swap out padding for height, and add vertical space that way.

The other option is to use the appearance rule to disable some of that default browser styling:

.signup-field {
  border-radius: 30px;
  padding: 25px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

You can see and play around quick a quickie demo here: https://codepen.io/anon/pen/mWZvWE

For a broader explanation of what is and is not possible when styling select elements, CSS Tricks has an excellent primer: https://css-tricks.com/dropdown-default-styling/

Edit

For Bootstrap, you'll actually need to use both solutions. Even with the appearance rule in place, adding additional padding to a select element pushes the value outside the visible frame of the element. BUT, if you apply padding, and then height, you will expand the visible frame, bringing your selected value back into view.

Here's an updated version of the same Code Pen: https://codepen.io/anon/pen/mWZvWE

Upvotes: 1

Ad Infinitum
Ad Infinitum

Reputation: 3696

It is possible that Border-radius and padding do not play good if the numbers are not selected wisely. In your example, if your border radius is out of the padding. You can try margins and it will be surely better. However, I did not try it myself. In order to be sure, you can add these to your css file

.signup-field {
  background: #fff;
  text-align: center;
  border-radius: 30px;
  padding: 25px;
}

Upvotes: 0

Related Questions