Why takes no effect in css? : I use a selector in my html，if i set the style in html,It looks normal.

    <div class="input-group" style="margin-bottom: 10px;margin-top: 0px">
        <input type="text"  class="form-control" id="search" value="{{ search_word }}"  style="height: 30px "  onkeydown="entersearch()" placeholder="Enter to search...">
            <div class="input-group-btn" style="font-size: x-small">
                <!--<select id="idsel" class="form-control select-input" >-->
                    <option value="campaignid">campaignid</option>
                    <option value="vender" >vender</option>
                    <option value="pkgname" >package</option>
               </select>
           </div>
     </div>

But when I changed to set the style in css,It takes no effect...

    <div class="input-group" style="margin-bottom: 10px;margin-top: 0px">
        <input type="text"  class="form-control" id="search" value="{{ search_word }}"  style="height: 30px "  onkeydown="entersearch()" placeholder="Enter to search...">
            <div class="input-group-btn" style="font-size: x-small">
                 <select id="idsel" class="form-control select-input-gp" >
                    <option value="campaignid">campaignid</option>
                    <option value="vender" >vender</option>
                    <option value="pkgname" >package</option>
                 </select>
            </div>
  </div>
  

    <script type="text/css">
       .select-input-gp{
            height: 30px;
            width: 200px;
            color:#fff;
            background-color:#337ab7;
            border-color:#2e6da4;
       }
    </script>
It is strange,Can anyone give me a guide?
