sagar sagar - 2 years ago 104
HTML Question

How to increase width of select box arrow?

I want to increase the width of select box arrow like fa fa caret. i am not getting it how to do. I used img tag inside the each field and given position absolute and adjusted with left top properties but i think this is not proper way of doing this and even i click on the image arrow not select options are opening so i removed this. Please tell me proper solution for it.

background: #E40444 !important;
color: #fff !important;

<script src=""></script>
<link href="" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src=""></script>
<link rel="stylesheet" href="">
<style type="text/css">


<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 value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
<div class="col-sm-2 catnames catnames-arrow ">
<select name="cat" class="form-control search-categories search-Hourly">
<option value="3">abcd</option>
<option value="4">abcd</option>
<option value="5">abcd</option>
<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 id="search_autocomplete" class="search-autocomplete"></div>

Answer Source

You can use the css triangle to make the arrow.


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


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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download