html - large ui select box -

im using semantic-ui, in search form when implement large input fields, select option field doesnt takes effect, still same size, implementing right way? looking documentation looks im doing right guess.

html

 <div class="ui large form">                   <div class="four fields">                   <div class="field">                    <select class="large ui dropdown">                     <option value="">all areas</option>                     <option value="1">chef</option>                     <option value="0">barman</option>                   </select>                   </div>                     <div class="field">                      <select class="large ui dropdown">                       <option value="">all resgions</option>                       <option value="1">new york</option>                       <option value="0">london</option>                     </select>                    </div>                     <div class="field">                      <input placeholder="ex: position, etc" type="text">                   </div>                    <div class="field">                      <div class="large ui blue button"><i class="search icon"></i> search</div>                   </div>                 </div>                 </div> 

you can add style large dropdown in select:

min-height: 2.7142em; 

or try use custom dropdown html/js:

<div class="ui selection large dropdown">     <input type="hidden" name="gender">     <i class="dropdown icon"></i>     <div class="default text">gender</div>     <div class="menu">         <div class="item" data-value="1">male</div>         <div class="item" data-value="0">female</div>     </div> </div> 

javascript:

$('.ui.dropdown').dropdown();