15

I've customized my <select> using like this:

background-color:#ececec;
border:0;
border:1px solid #e3e3e3;
border-radius:3px;
width:100%;
font-family:'FuturaStdLightOblique', sans-serif;
font-size:16px;
color:#616263;
outline:none;
height: 40px;

But I also want to change my dropdown arrow into a look that fits this design. I would like to use the unicode triangle ▼ (&#9660;) as an alternative to the arrow down and if possible, set it to the same color as the texts in my select tag.

Any ideas on how I can achieve this without using anything aside from CSS/HTML? Thanks in advance.

0

3 Answers 3

31

maybe so?

*,
*:before,
*:after {
  box-sizing: border-box;
}

* {
  padding: 0;
  margin: 0;
}

form {
  padding: 1rem;
  max-width: 400px;
  margin: 1em auto;
}

.select {
  height: 40px;
  width: 100%;
  overflow: hidden;
  position: relative;
  border-radius: 3px;
  margin-bottom: 1em;
}

.select:after {
  content: "▼";
  padding: 12px 8px;
  position: absolute;
  right: 10px;
  top: 0;
  z-index: 1;
  text-align: center;
  width: 10%;
  height: 100%;
  pointer-events: none;
}

.select__field {
  height: 40px;
  width: 100%;
  padding: 5px 15px;
  color: #616263;
  background-color: #ececec;
  border: 1px solid #e3e3e3;
  outline: none;
  font-size: 16px;
  -webkit-appearance: none;
  /* for webkit browsers */
  -moz-appearance: none;
  /* for firefox */
  appearance: none;
  /* for modern browsers */
}


/* remove default caret for ie */

.select__field::-ms-expand {
  display: none;
}

.select__field:focus:invalid {
  border-color: #FD6347;
}

.select__field:required:valid {
  border-color: #006400;
}

.btn-submit {
  color: #fff;
  display: block;
  padding: 15px;
  text-transform: uppercase;
  background: #535C69;
  width: 100%;
  border: none;
  border-radius: 3px;
}
<form action="#" method="post">
  <div class="select">
    <select name="nameValueSelect" class="select__field" required>
      <option value="" selected>Choose option ...</option>
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
      <option>Option 5</option>
      <option>Option 6</option>
    </select>
  </div>

  <button type="submit" class="btn-submit">Submit</button>
</form>

1
  • 11
    the wrapper is what makes this possible (e.g.select:after will not work) May 2, 2019 at 16:34
1

For those who like to understand and to complement Dmitriy's solution (simplified code below), this is done by:

  1. adding an element which contains the select element (a wrapper)
  2. setting a relative position to the wrapper
  3. removing appearance on the select for taking out the default triangle
  4. defining an ::after rule on the wrapper with:
    1. a content property with the unicode ▼
    2. no pointer-events so that the select remains clickable and triggers the dropdown event
    3. an absolute position in order to be placed on the right place

So the bare-bones (literally the skeleton, only what is required) are:

.wrapper {
  overflow: hidden;
  position: relative;
  width: 10rem; /* real length of dropdown */
}

.wrapper:after {
  content: "▼";
  font-size: 0.8rem;
  pointer-events: none; /* ▼ click triggers dropdown */
  position: absolute;
  right: 0.2rem;
  top: 0.3rem;
  z-index: 1;
}

select {
  /* remove default caret */
  -webkit-appearance: none; /* webkit browsers */
  -moz-appearance: none; /* firefox */
  appearance: none; /* modern browsers */
  width: 100%;
}

select::-ms-expand {
  display: none; /* remove default caret for ie */
}
<section class="wrapper">
  <select>
    <option value="" selected>Choose option</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</section>

The code above is in this "Select caret" Codepen if you need to try out further adjustments.

0

It is very simple to make your own customised drop down, given code is to explain you a basic and easiest way to implement it.

.box select {
  background-color:#000000;
  color: white;
  padding: 26px;
  border-bottom: 1px solid #5e5e5e !important;
  font-size: 17px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
  -webkit-appearance: button;
    outline: none;
  width: 48%;
  border: none;
  font-weight: 600;
  padding-left: 0px;
}

.box::before {
  content: "\f13a";
  position: absolute;
  right: 0;
   width: 60px;
  height: 18%;
  text-align: center;
  font-size: 25px;
  line-height: 31px;
  color: rgba(255, 255, 255, 0.5); 
   background-color: rgba(255, 255, 255, 0.1); 
}
<div class="box">
  <select>
    <option>Micbookpro-selected</option>
        <option>Micbookpro-selected</option>

    <option>Micbookpro-selected</option>
    <option>Micbookpro-selected</option>
    <option>Micbookpro-selected</option>

  </select>
</div>
</div>

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.