How can you change this arrow's position so that it is more inclined to the left?

Question

I want to change this black arrow inside a selector from the initial position. How would you do that with CSS?

.form-control-countrySelector {
  height: 40px;
  width: 421px;
  left: 0px;
  right: 0px;
  top: 30px;
  /* white */
  background: #FFFFFF;
  border: 1px solid rgba(60, 66, 87, 0.12);
  box-sizing: border-box;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.04);
  border-radius: 8px 8px 0px 0px;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  display: flex;
  align-items: center;
  letter-spacing: 0.005em;
  font-feature-settings: 'pnum' on, 'lnum' on;
  color: #1A1F36;
  padding: 9px;
  margin-left: 110px;
}

<div>
  <select className="form-control-countrySelector">
    <option>United States</option>
  </select>
  <input type="text" className="form-control-countryZIP" id="cardNumber" placeholder="ZIP" />
</div>

I don't see any arrows on Microsoft Edge Version 95.0.1020.53 (Official build) (64-bit) on Windows 11. There's the normal downward-facing carat that all `select`s have, but no arrows. — Heretic Monkey, Nov 25 '21 at 17:50
If you are talking about that carat, see [Change color and appearance of drop down arrow](https://stackoverflow.com/q/611482/215552), among many others. — Heretic Monkey, Nov 25 '21 at 17:52

score 0 · Answer 1 · answered Nov 25 '21 at 18:01

0

if you want to hide arrow than add appearance: none; attribute in Select

select
{
      width:100px;
      appearance: none;
}

<select>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>        
</select>

answered Nov 25 '21 at 18:01

Anonymous

539
2
6

score 0 · Answer 2 · answered Nov 25 '21 at 18:06

if you want add arrow before the option than

Add background image :

select{
    width:100px;
    appearance: none;
    padding:5px 2px 2px 30px;
    border: none;
    background: transparent url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat left center;
   
}

<select>
   <option value="1">Option 1</option>
   <option value="2">Option 2</option>        
</select>

Zahra Mirzaei · Answer 3 · 2021-11-25T19:45:19.617

You can use clip-path property to draw your arrow and move it anywhere you want with display: grid and justify-self properties. For example, you can put it in center.

.select {
  display: grid;
   grid-template-areas: "select";
   align-items: center;
   width:50%;
}

.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: #1b1b1b;
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: center;
  margin-right:5px;
}

select {
  /* A reset of styles, including removing the default dropdown arrow */
  appearance: none;
  /* Additional resets for further consistency */
  background-color: transparent; 
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
}

select,
.select:after {
  grid-area: select;
}

<label for="standard-select">Select You Option</label>
<div class="select">
  <select id="standard-select">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
    <option value="Option 4">Option 4</option>
    <option value="Option 5">Option 5</option>
    <option value="Option length">
      Option that has too long of a value to fit
    </option>
  </select>

Or put it in left side

.select {
  display: grid;
   grid-template-areas: "select";
   align-items: center;
   width:30%;
}

.select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: #1b1b1b;
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  justify-self: start;
  margin-left:5px;
}

select {
  /*A reset of styles, including removing the default dropdown arrow*/
  appearance: none;
  /* Additional resets for further consistency */
  background-color: transparent; 
  padding: 0 1em 0 1.2rem;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;
}
select,
.select:after {
  grid-area: select;
}

  <label for="standard-select">Select Your Option</label>
<div class="select">
  <select id="standard-select">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
    <option value="Option 4">Option 4</option>
    <option value="Option 5">Option 5</option>
    <option value="Option length">
      Option that has too long of a value to fit
    </option>
  </select>
</div>

For more information, you can read Custom Select Styles with Pure CSS and Awesome CSS Select Styles You Can Use Right Now articles.

How can you change this arrow's position so that it is more inclined to the left?

3 Answers3