how to change the select arrow in css

Black Bat answered on March 9, 2021 Popularity 10/10 Helpfulness 4/10

answer how to change the select arrow in css

related html select custom arrow

related css style select arrow color

how to change the select arrow in css

Comment

.styled-select {
  width: 100px;
  height: 17px;
  overflow: hidden;
  overflow: -moz-hidden-unscrollable;
  background: url(images/downarrow_blue.png) no-repeat right white;
  border: 2px double red;
  display: inline-block;
  position: relative;
}

.styled-select select {
  background: transparent;
  -webkit-appearance: none;
  width: 100px;
  font-size: 11px;
  border: 0;
  height: 17px;
  position: absolute;
  left: 0;
  top: 0;
}

body {
  background-color: #333333;
  color: #FFFFFF;
}

.block label {
  color: white;
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: stackoverflow.com

Tags: css select

Link to this answer
Share Copy Link

Contributed on Jun 02 2021

Black Bat

0 Answers Avg Quality 2/10

Closely Related Answers

html select custom arrow

Comment

select {
    $bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: $bs-form-select-bg-img;
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
}

Popularity 9/10 Helpfulness 6/10 Language css

Source: discourse.webflow.com

Tags: css html-select html-sel

Link to this answer
Share Copy Link

Contributed on Aug 28 2024

The whistling wizard

0 Answers Avg Quality 2/10

css style select arrow color

Comment

.select_box{
  width: 200px;
  overflow: hidden;
  border: 1px solid #000;
  position: relative;
  padding: 10px 0;
}
.select_box:after{
  width: 0; 
  height: 0; 
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #f00;
  position: absolute;
  top: 40%;
  right: 5px;
  content: "";
  z-index: 98;
 }
.select_box select{
  width: 220px;
  border: 0;
  position: relative;
  z-index: 99;
  background: none;
}

Popularity 10/10 Helpfulness 5/10 Language css

Source: stackoverflow.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 09 2021

Fierce Flamingo

0 Answers Avg Quality 2/10

how to change the select arrow in css

Contents

More Related Answers

how to change the select arrow in css

Closely Related Answers

html select custom arrow

css style select arrow color

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.