Question

I have a drop down list which I styled but I still can’t get why does the text always align differently in chrome and in firefox. I tried adding text-align:center; on my css and the firefox make the selection list centered but is not centered vertically while in chrome it doesn’t centered it all but at least it’s verticall alignment is centered. Here’s the output of it currently (text-align center part removed):

Firefox rendering:

Chrome rendering:

this is my css code so far:

div container for the dropdown:

.container {
 background-color:#424141;
 border:1px solid #424141;
 width:280px;
  height:40px;
  font-size:13pt;
  font-weight:bold;
  padding-right: -20px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

and for the drop down:

.dropdown  {
 background-color:#424141;
  border:1px solid #424141;
  position:absolute;
  color: #000000;
  width:280px;
  height:40px;
  font-size:13pt;
  font-weight:bold;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

and here’s the result after adding text-align:center; on the dropdown class:

in chrome it remains the same as above.

Here’s the html code for this. well it’s inside a table I think I can just skip the other part:

<tr>
    <td><p class="titles">City</p></td>
    <td><div class="container"><select name="city" tabindex="16" class="dropdown">
        <?php foreach ($cities as $city1): ?>

            <option <?php echo "value='".$city1['city']."'"; if($city1['city']==$city){echo "selected='selected'";} ?>>
        <?php echo $city1['city']; ?>
            </option>

        <?php endforeach ?>
        </select></div></td>
</tr>

Answer 1

What you are trying to do cannot be done cross-browser using HTML/CSS because the HTML/CSS specification doesn’t actually SAY how CSS or styling is supposed to be applied to form elements. Actualy you can write your own dropdown with javascript:

html:

<div id="search_result_fake_container">
    <input id="search_result_fake" value="- All Categories -">
    <div id="search_result_fake_div"></div>
</div>
<div id="search_result_present_list">
    <div class="search_result_list_item" id="search_result_item_1" style="text-align:center;">item1</div>';
    <div class="search_result_list_item" id="search_result_item_2" style="text-align:center;">item2</div>';
    <div class="search_result_list_item" id="search_result_item_3" style="text-align:center;">item3</div>';
</div>

js:

<script type="text/javascript">
    $(document).ready(function () {
        $("#search_result_fake_div").live("click", function () {
            $("#search_result_present_list").show("fast");
        });

        $("#search_result_present_list").live("mouseleave", function () {
            $("#search_result_present_list").hide();
        });

        $(".search_result_list_item").live("click", function () {
            $("#search_result_fake").val($(this).html());
            $("#search_result_present_list").hide();
        });
    })
</script>

css:

#search_result_fake {
    -moz-box-sizing: border-box; /* for Firefox */
    -webkit-box-sizing: border-box; /* for Safari $ Chrome */
    box-sizing: border-box; /* for IE $ Opera */
    padding-left: 5px;
    width: 100%;
    font-size: 90%;
    outline: none;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    height: 100%;
}

#search_result_fake_div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    cursor: pointer;
}

#search_result_present_list {
    display: none;
    position: absolute;
    text-align: left;
    top: 85px;
    left: 65%;
    font-size: 90%;
    overflow: auto;
    background-color: #eae7e7;
    border: #6f6f6f solid 1px;;
    height: 190px;
    width: 23%;
    z-index: 4;
}

css is copy paste but i hope you understand what i meen