how to render html select dropdown list

0
votes

https://jsfiddle.net/caot/10438rmv/

Here is an example for html select dropdown list.

  • It's rendered in Chrome like the following:

enter image description here

  • In Firefox, it looks the following:

enter image description here

How is it possible to have it rendered like that in Firefox from Chrome? I did some research, however, can't get it. Don't ask why not use Firefox other than Chrome since there is something we don't like but have to face in the real world.

Thanks in advance.

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<style>
.columnedForm .ctrlHolder {
    float: left;
    width: 250px;
    padding: 0;
    clear: none;
}
.uniForm .textInput,
.uniForm .fileUpload,
.uniForm .selectInput,
.uniForm .dateinput,
.uniForm .datetimeinput,
.uniForm .search_box,
.uniForm select {
    width: 85%;
}
.uniForm{ margin: 0; padding: 0; position: relative; z-index: 1; } /* reset stuff */
.uniForm textarea {
    width: 85%;
}
</style>
 

</head>

 <body>
  <form action="." method="post" class="uniForm columnedForm" onsubmit="action.disabled=true; return true;">

    <div id="div_id_assess_date" class="ctrlHolder">
        <label for="id_assess_date">
            data 1
        </label>
        
        <input class="dateinput hasDatepicker" id="id_assess_date" name="assess_date" type="text" value="xx-xx-xxxx">
    </div>

    <div id="div_id_assessment_time_period" class="ctrlHolder">        
        <label for="id_assessment_time_period">
            data 2
        </label>
        

        <select class="select" id="id_assessment_time_period" name="assessment_time_period">
        <option value="">---------</option>
        <option value="1" selected="selected">At ...</option>
        <option value="2">Base ...</option>
        </select>
    </div>

    <div style="display: none">
        <input id="id_stage_type" name="stage_type" type="hidden" value="1">
    </div>

    <div id="div_id_stage" class="ctrlHolder">
        <label for="id_stage">
            data 3
        </label>


        <select class="select" id="id_stage" name="stage" title="A dropdown list ">
        <option id="id_stage_option" value="">---------</option>
        <option value="4">Here is a pretty long message .............................................................................................................................................................................................................................   .....................  </option>
        <option value="4">Here is a pretty long message .............................................................................................................................................................................................................................   .....................  </option>
        </select>        
    </div>
    </form>
 </body>
 
</html>
javascripthtmljquery