Breaking News: Grepper is joining You.com. Read the official announcement!

html select custom arrow

Add Answer

The whistling wizard answered on March 9, 2021 Popularity 2/10 Helpfulness 3/10

answer html select custom arrow

related css style select arrow color

related how to change the select arrow in css

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 2/10 Helpfulness 3/10 Language css

Source: discourse.webflow.com

Tags: css html-select

Link to this answer
Share Copy Link

Contributed on Aug 28 2024

The whistling wizard

0 Answers Avg Quality 2/10

Closely Related Answers

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

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

Link to this answer
Share Copy Link

Contributed on Jun 02 2021

Black Bat

0 Answers Avg Quality 2/10

html select custom arrow

Contents

More Related Answers

html select custom arrow

Closely Related Answers

css style select arrow color

how to change the select arrow in css

Grepper

Documentation

Social

Legal

Contact

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