選択ボックスの矢印の幅を広げる方法は？

Question

fa faキャレットのような選択ボックスの矢印の幅を広げたいと思います。私はそれを行う方法を取得していない。私は各フィールド内のimgタグを使用し、絶対位置を与えられ、左上のプロパティで調整しましたが、これはこれを行う適切な方法ではないと私はイメージの矢印をクリックしても選択肢が開いているので、私はこれを削除していません。それに対して私に適切な解決策を教えてください。より良い

.search-categories{ 
 
    background: #E40444 !important; 
 
    color: #fff !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"> 
 
    <style type="text/css"> 
 
    
 
    </style> 
 

 
    <div class="col-md-12 "> 
 
     <div class="row"> 
 
     <form action="#" method="get" id="search_mini_form"> 
 
      <div class="col-sm-offset-2 col-sm-2 catnames"> 
 
      <select name="cat" class="form-control search-categories"> 
 
       <option>Categories</option> 
 
       <option value="3">abcd</option> 
 
       <option value="4">abcd</option> 
 
       <option value="5">abcd</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-sm-2 catnames catnames-arrow "> 
 
      <select name="cat" class="form-control search-categories search-Hourly"> 
 
       <option>Hourly</option> 
 
       <option value="3">abcd</option> 
 
       <option value="4">abcd</option> 
 
       <option value="5">abcd</option> 
 
      </select> 
 
      </div> 
 
      <div class="col-sm-4 catquery "> 
 
     <div class="input-group"> 
 
      <input type="search" class="form-control " name="q" id="location" value="" maxlength="128" placeholder="Search Place..." autocomplete="off" /> 
 
     <div class="input-group-addon catsubmit"><i class="fa fa-search"></i></div> 
 
      </div> 
 
      </div> 
 
      <div id="search_autocomplete" class="search-autocomplete"></div> 
 
     </form> 
 
     </div> 
 
    </div>

Answer 1

あなたは矢を作るために、CSSの三角形を使用することができます。

HTML

<div class="selectwrap"> 
     <select> 
     <option>Option 1</option> 
     <option>Option 3</option> 
     <option>Option 4</option> 
     </select> 
</div> 

CSS

select { 
    border: 1px solid #ccc; 
    height: 34px; 
    width: 250px; 
    padding: 6px 12px; 
    line-height: 1.42857143; 
} 

.selectwrap { 
    position: relative; 
    float: left; 
} 

.selectwrap:after { 
    content: ""; 
    position: absolute; 
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent; 
    border-right: 8px solid transparent; 
    border-top: 8px solid #000; 
    right: 4px; 
    top: 14px; 
    pointer-events: none; 
} 

Answer 2

select2、selectizeのようないくつかのselect要素のカスタマイズプラグインを使用します。これらのプラグインが作成する外観は、CSSを使用してカスタマイズできます。

select要素の外観を、cssだけでクロスブラウザ方式で完全に制御することはできません。

Answer 3

非常にブラウザがフォーム要素（特にチェックボックス、ラジオ、選択、進捗）の外観が異なるため、フォーム要素をクロスブラウザでスタイルするのは非常に複雑です。

select2のようなプラグインを使用することをお勧めします。ブラウザに依存しない非常に要素の簡単なスタイル設定が可能です。

$(document).ready(function() { 
 
    $('select').select2({ 
 
    width: '200px' 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://select2.github.io/select2/select2-3.5.3/select2.css" rel="stylesheet" /> 
 
<script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script> 
 

 

 
<select> 
 
    <option>Op 1</option> 
 
    <option>Op 2</option> 
 
    <option>Op 3</option> 
 
    <option>Op 4</option> 
 
</select>