CODEWITHSUNDEEP
htmlcss
John Smith
John Smith

Reputation: 407

How to fix the center select text in a box?

I have this sample:

link

CODE HTML:

<div class="select-style6">
              <select name="office" id="office">
                      <option value="0">Please select:</option>
                      <option value="9">oofffjjgh</option>                                            
                      <option value="10">test</option>                                            
                      <option value="11">test</option>                                            
                      <option value="13">test</option>
             </select>
</div>

CODE CSS:

.select-style6 {
    background-image: url("/public/images/arrow-field.png"), linear-gradient(to right, white 79%, white 70%, gray 71%, lightgray 71%, lightgray 100%);
    background-position: 149px center, center center;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 183px;
    height: 33px;
}

.select-style6 select {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 12px;
    line-height:normal;
}
.select-style6 select:focus {
    outline: none;
}

I want to align the text to the center (vertically) on all browsers.

What is the best solution?

I tried to add padding: 8px but not okay, I want another method.

Can you please help me with a solution that would best work everywhere?

Thanks in advance!

Upvotes: 0

Views: 1161

Answers (3)

Anonymous Duck
Anonymous Duck

Reputation: 2998

Just remove the padding and set the line-height equal to it's height. Your welcome :)

.select-style6 select {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 12px;
    line-height:33px;
}

Edit: Hi I just tested it in IE but unfortunately we cannot change the alignment of select in IE. As expected IE never fails us!

Upvotes: 3

Daniel Mera Alvarez
Daniel Mera Alvarez

Reputation: 72

you can use position: relative; to see the content above other and this for the position top: 50%; left: 50%; text-align: center;

Upvotes: 1

Jikar
Jikar

Reputation: 48

Make something like this : 

.select-style6{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

Flex works for most browsers

Upvotes: 1

Related Questions