Little form on page with dropdown select option when I click dropdown on inspected device width 50% zoomed display like below how to full width ?
select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-color: transparent;
height: 45px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAUCAMAAACtdX32AAAAdVBMVEUAAAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAhMdQaAAAAJ3RSTlMAAAECAwQGBwsOFBwkJTg5RUZ4eYCHkJefpaytrsXGy8zW3+Do8vNn0bsyAAAAYElEQVR42tXROwJDQAAA0Ymw1p9kiT+L5P5HVEi3qJn2lcPjtIuzUIJ/rhIGy762N3XaThqMN1ZPALsZPEzG1x8LrFL77DHBnEMxBewz0fJ6LyFHTPL7xhwzWYrJ9z22AqmQBV757MHfAAAAAElFTkSuQmCC);
background-position: 100%;
background-repeat: no-repeat;
border: 1px solid #ccc;
padding: 0.5rem;
border-radius: 0;
}
<span class="text-danger">*</span> Trading Platform</label>
<select class="form-control">
<option>Select a trading platform</option> <option>UTrade</option>
<option>MT4</option>
</select>
Related
My dropdowns look like the left on Chrome, but looks like the right on Firefox and Safari
How can I style my dropdown to look like the chrome version on safari and firefox? I don't like the grey background for the caret that shows on firefox
(I would also like to move the caret symbol a little bit to the left)
This is my css and html for the dropdown. You can click "Run code snippet" on firefox and see that it looks like the one on the right.
select{
box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.7);
border-radius: 1rem;
padding: 0.25rem 0.5rem;
border: 0;
}
select:active, select:focus{
outline: none;
}
<select type="dropdown">
<option>Option 1</option>
<option>Option 2</option>
</select>
You should reset default styling and add your custom style that is uniform across browsers. This below snippet should help
select{
box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.7);
border-radius: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-right: 1rem;
padding-left: 0.5rem;
border: 0;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat, repeat;
background-position: right .7em top 50%;
background-size: .65em auto;
}
<select type="dropdown">
<option>Option 1</option>
<option>Option 2</option>
</select>
Read more from this blog post: https://css-tricks.com/styling-a-select-like-its-2019/
select{
box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.7);
border-radius: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-right: 1.5rem; /* increased to make space for arrow*/
padding-left: 0.5rem;
border: 0;
appearance: none; /* remove default arrow */
outline: none; /* looks better without outline */
}
.custom-select {
position: relative; /* container for pseudo element */
display: inline-block; /* make width to fit content */
}
.custom-select::after {
content: '⌄';
position: absolute;
background: transparent;
right: 10%;
top: -10%;
pointer-events: none; /* let clicks go through */
}
<div class="custom-select">
<select type="dropdown">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
This is a really easy and effective way, consistent on every browser.
HTML:
Add a wrapper on select element
CSS:
Set appearance:none and increase padding-right accordingly on select element.
Set the wrapper position: relative; and display: inline-block; to make it as a container for an absolute positioned pseudo element.
Style and position the wrapper::after element how you prefer, with pointer-events:none so that your clicks will go through it, opening the select.
I am finishing up this table and I added a search function to it. But in the search bar, I want to put a search icon png file for the background image just like the example on W3Schools. I put it in the myInput field, but either nothing appears in the search bar, or it is so massive you can see a tiny top corner piece of the search icon and I cant figure out how to fix it.
#myInput {
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png');
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
<input type="text" id="myInput">
You need to use the background-size property. Because the image is larger than the input, you are seeing a white portion of the picture. By setting the property to contain the image is shrunk to the size of your input.
#myInput {
background-image: url('https://cdn1.iconfinder.com/data/icons/hawcons/32/698627-icon-111-search-512.png');
background-repeat: no-repeat;
background-position: left center;
background-size: 30px;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}
<input placeholder="Search..." type="text" id="myInput">
Note: You should also set the background-position property to 0 or remove it all together; otherwise, the search icon will be skewed to the right and downwards.
If instead you want to make the icon smaller, change background-position to left center and set background-size to a px value of your choice.
HTML
<div class="fake-input">
<input type="text" />
<img src="http://www.zermatt-fun.ch/images/mastercard.jpg" width=25 />
</div>
CSS
.fake-input { position: relative; width:240px; }
.fake-input input { border:none; background-color:#fff; display:block; width: 100%; box-sizing: border-box }
.fake-input img { position: absolute; top: 2px; right: 5px }
Source is here
Trying to figure out a problem with a styled select box. It is wrapped within a div with a background to create a mask-look to it.
When there is too much text in the input it will overflow into the button.
HTML:
<div class="styled-select">
<select class="form-control required" name="address" disabled>
<option style="" value="">Please Select Address</option>
</select>
</div>
CSS:
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 15px;
font-size: 16px;
line-height: 1;
border: 0;
height: 50px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF;
background-size: 60px;
height: 50px;
border-radius: 10px;
}
#media (min-width: 768px) {
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 18px;
font-size: 18px;
line-height: 1;
border: 0;
height: 55px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF;
background-size: 60px;
height: 55px;
border-radius: 10px;
}
Can anyone solve this?
The problem is, that you are using padding-right: 10%; in your css on the select itself. Measuring the image - the select is approx 270px wide, making 10% of the width only 27px - which is correct by my measures.
To solve this - the background-image for arrow seems to be 60px wide, so use padding-right: 78px; (that is 60px for the background image's width and 18px to respect the padding in mobile media query you've previously set).
See this Fiddle
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 15px;
font-size: 16px;
line-height: 1;
border: 0;
height: 50px;
border: 1px solid #0082ff; /* Just to see the area of the form in white bg */
border-radius: 10px;
-webkit-appearance: none;
padding-right: 55px;
box-sizing: border-box;
}
.styled-select {
width: 200px;
overflow: hidden;
background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF;
background-size: 50px;
height: 50px;
border-radius: 10px;
text-overflow: ellipsis;
}
#media (min-width: 768px) {
.styled-select select {
font-family: "Circular", Helvetica, Arial, sans-serif;
font-size: 18px;
background: transparent;
width: 100%;
padding: 18px;
font-size: 18px;
line-height: 1;
border: 0;
height: 55px;
border-radius: 10px;
-webkit-appearance: none;
padding-right: 10%;
}
.styled-select {
width: 100%;
overflow: hidden;
background: url(http://emojipop.net/data/images/emoji_set_651.png) no-repeat right #FFF;
background-size: 60px;
height: 55px;
border-radius: 10px;
}
<div class="styled-select">
<select class="form-control required" name="address">
<option style="" value="">Please Select Address</option>
<option style="" value="">Please Select Address2</option>
<option style="" value="">Please Select Address3</option>
</select>
</div>
without seeing any of your code, it is a bit hard to tell how you're setting up the HTML to be structured. But one thing you could do is fudge it. Make it appear as if thats what is happening. Assuming your dropdown arrow is a separate element from your select item you could give it some of the following code. (.select button is the class i gave to your button on the dropdown)
.selectButton {
display: block;
position: absolute;
height: 100%;
width: 20%;
max-width: 40px;
background: blue;
z-index: 12;
right: 0;
top: 0;
box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);
}
basically what this does is put it in front of the input text element and then the box shadow does the trick of gradually covering up the additional text.
If you need to fudge it without altering the original element, create a parent wrapper with a div or something within the it and have the select element be a sibling then give it a style of pointer-events: none; in order to prevent it from being clicked on but will still have the appearance that you want.
Some people may say this is bad practice, but given the situation this is about the best thing you can do. very easy, very light and more functional than many of the options provided.
Holler if you have any questions!
Good Luck buddy!
after comment
try this css per info from comment. It'd be best to create a psuedo element with a background color, bg image and a box shadow on it with a z-index that is higher than the select to create a fake button that will still be make the select clickable.
.styled-select {
/*have this create the size of the select*/
width: 100%;
overflow: hidden;
background-repeat: no-repeat;
-webkit-background-size: 80% 80%;
background-size: 80% 80%;
height: 50px;
position: relative;
}
.style-select::before {
content: '';
display: block;
position: absolute;
right: 0;
background-color: $blue;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 100%;
background: url(../images/bg/down-arrow.jpg);
/* ^^^^ use this as just the white arrow png ^^^ */
box-shadow: -24px 0px 30px rgba(255, 255, 255, 1);
pointer-events: none;
}
Hello there:
This is my solution, you shall take in a variable, which will be the BG-size of the 'down-arrow'. In this case 60px, so here is it:
.styled-select select{
width: calc( 100% - 60px / 2); //before was width: 100%;
text-overflow: ellipsis;
}
#media (min-width: 768px) {
.styled-select select {
width:100%; //remove it, only one in the mobile first declarationis needed
}
}
Keep all the other CSS same, only changed the above mention ones. HOPE THIS HELPS
You are using a percentage value (10%) for the padding-right of the select element in 2 different places. However, for the background-size property of the .styled-select element you are using a fixed pixel value (60px).
This means that when the .styled-select element is exactly 600px wide, the text of the child select element will be clipped at the point the background-image begins - any bigger and you will start to see white space appear between the text and image, any smaller and the text will start to overlap the image.
So, to solve this, you should change the padding-right to a fixed pixel value equal to the background-size value plus a few extra pixels so the text doesn't run right up to the background-image.
I've also taken the liberty of cleaning up your CSS a bit; you don't need to redeclare all styles within a media query, only those you wish to override or change.
.styled-select{
background:#fff linear-gradient(0deg,#00f,#00f) right / 60px repeat-y;
/** DELETE LINE ABOVE AND UNCOMMENT LINE BELOW **/
/* background:#fff url(../images/bg/down-arrow.jpg) right center / 60px no-repeat;*/
border-radius:10px;
height:50px;
overflow:hidden;
width:100%;
}
.styled-select select{
-webkit-appearance:none;
background:transparent;
border:0;
border-radius:10px;
font-family:Circular,Helvetica,Arial,sans-serif;
font-size:16px;
height:50px;
line-height:1;
padding:15px 75px 15px 15px;
width:100%;
}
#media (min-width:768px){
.styled-select{
height:55px;
}
.styled-select select{
font-size:18px;
height:55px;
line-height:1;
padding-right:78px;
}
}
body{
background:#003;
}
<div class="styled-select">
<select class="form-control required" name="address" disabled>
<option value="">Please Select Address</option>
</select>
</div>
Try this:
.styled-select select {
white-space: nowrap;
width: 10em;
overflow: hidden;
text-overflow: ellipsis;
}
I have this short sample:
link
CODE HTML:
<div class="select-style6">
<select name="emailtemplate" onchange="uploadtemplatecode(this.value);">
<option value="0">Choose an email template</option>
<option value="2">Email sent to pacient exercise</option>
<option value="5">Email sent to patient account create</option>
<option value="8">created from repo</option>
<option value="9">Happy birthday</option>
<option value="10">template with image that really works</option>
<option value="11">Appointment Template</option>
<option value="12">Appointment Reminder</option>
<option value="13">Credit Card Expiration Reminder</option>
<option value="14">Credit Card Succesfull Charge</option>
<option value="15">Credit Card Payment Declined</option>
<option value="16">New practitioner Account</option>
<option value="17">New Patient Email</option>
<option value="18">New message to practitioner</option>
<option value="19">Referall Template</option>
</select>
</div>
CODE CSS:
.select-style6 {
background-image: url("/public/images/arrow-field.png"), linear-gradient(to right, white 79%, white 70%, gray 71%, lightgray 71%, lightgray 100%);
background-position: 149px center, center center;
background-repeat: no-repeat;
border: 1px solid #ccc;
border-radius: 3px;
margin: 0;
overflow: hidden;
padding: 0;
width: 183px;
height: 33px;
}
.select-style6 select {
padding: 10px 8px;
width: 100%;
border: none;
box-shadow: none;
background-color: transparent;
background-image: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 12px;
}
.select-style6 select:focus {
outline: none;
}
As you can see, the text is too long and comes looks ugly.
What I want to do is add the text below so it only looks ugly.
Can you please tell me which is the best way to do this?
Thanks in advance!
Increase the width of this class to make the text fits correctly :
.select-style6 {
background-image: url("/public/images/arrow-field.png"), linear-gradient(to right, white 79%, white 70%, gray 71%, lightgray 71%, lightgray 100%);
background-position: 149px center, center center;
background-repeat: no-repeat;
border: 1px solid #ccc;
border-radius: 3px;
margin: 0;
overflow: hidden;
padding: 0;
width: 265px; /* that width change */
height: 33px;
}
See it here
I would like to add some style on a select box with the pseudo :after (to style my select box with 2 parts and without images). Here's the HTML:
<select name="">
<option value="">Test</option>
</select>
And it doesn't work. I don't know why and I didn't find the answer in the W3C specs. Here's the CSS:
select {
-webkit-appearance: none;
background: black;
border: none;
border-radius: 0;
color: white;
}
select:after {
content: " ";
display: inline-block;
width: 24px; height: 24px;
background: blue;
}
So is it normal or is there a trick?
I haven't checked this extensively, but I'm under the impression that this isn't (yet?) possible, due to the way in which select elements are generated by the OS on which the browser runs, rather than the browser itself.
I was looking for the same thing since the background of my select is the same as the arrow color. As previously mentioned, it is impossible yet to add anything using :before or :after on a select element. My solution was to create a wrapper element on which I added the following :before code.
.select-wrapper {
position: relative;
}
.select-wrapper:before {
content: '\f0d7';
font-family: FontAwesome;
color: #fff;
display: inline-block;
position: absolute;
right: 20px;
top: 15px;
pointer-events: none;
}
And this my select
select {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 10px 20px;
background: #000;
color: #fff;
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select::-ms-expand {
display: none;
}
I have used FontAwesome.io for my new arrow, but you can use whatever else you want. Obviously this is not a perfect solution, but depending on your needs it might be enough.
To my experience it simply does not work, unless you are willing to wrap your <select> in some wrapper. But what you can do instead is to use background image SVG. E.g.
.archive .options select.opt {
-moz-appearance: none;
-webkit-appearance: none;
padding-right: 1.25EM;
appearance: none;
position: relative;
background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='10' fill='gray'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 1.5EM 1EM;
background-position: right center;
background-clip: border-box;
-moz-background-clip: border-box;
-webkit-background-clip: border-box;
}
.archive .options select.opt::-ms-expand {
display: none;
}
Just be careful with proper URL-encoding because of IE. You must use charset=utf8 (not just utf8), don't use double-quotes (") to delimit SVG attribute values, use apostrophes (') instead to simplify your life. URL-encode s (%3E). In case you havee to print any non-ASCII characters you have to obtain their UTF-8 representation (e.g. BabelMap can help you with that) and then provide that representation in URL-encoded form - e.g. for ▾ (U+25BE BLACK DOWN-POINTING SMALL TRIANGLE) UTF-8 representation is \xE2\x96\xBE which is %E2%96%BE when URL-encoded.
What if modifying the markup isn't an option?
Here's a solution that has no requirements for a wrapper: it uses an SVG in a background-image.
You may need to use an HTML entity decoder to understand how to change the fill colour.
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
background-repeat: no-repeat;
background-position: right .7em top 50%;
background-size: .65em auto;
Pinched from CSS-Tricks.
Faced the same problem. Probably it could be a solution:
<select id="select-1">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<label for="select-1"></label>
#select-1 {
...
}
#select-1 + label:after {
...
}
This post may help http://bavotasan.com/2011/style-select-box-using-only-css/
He is using a outside div with a class for resolving this issue.
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
This solution is similar to the one from sroy, but with css triangle instead of web font:
.select-wrapper {
position: relative;
width: 200px;
}
.select-wrapper:after {
content: "";
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #666;
position: absolute;
right: 8px;
top: 8px;
pointer-events: none;
}
select {
background: #eee;
border: 0 !important;
border-radius: 0;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
text-indent: 0.01px;
text-overflow: "";
font-size: inherit;
line-height: inherit;
width: 100%;
}
select::-ms-expand {
display: none;
}
<div class="select-wrapper">
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>
</div>
This is a modern solution I cooked up using font-awesome. Vendor extensions have been omitted for brevity.
HTML
<fieldset>
<label for="color">Select Color</label>
<div class="select-wrapper">
<select id="color">
<option>Red</option>
<option>Blue</option>
<option>Yellow</option>
</select>
<i class="fa fa-chevron-down"></i>
</div>
</fieldset>
SCSS
fieldset {
.select-wrapper {
position: relative;
select {
appearance: none;
position: relative;
z-index: 1;
background: transparent;
+ i {
position: absolute;
top: 40%;
right: 15px;
}
}
}
If your select element has a defined background color, then this won't work as this snippet essentially places the Chevron icon behind the select element (to allow clicking on top of the icon to still initiate the select action).
However, you can style the select-wrapper to the same size as the select element and style its background to achieve the same effect.
Check out my CodePen for a working demo that shows this bit of code on both a dark and light themed select box using a regular label and a "placeholder" label and other cleaned up styles such as borders and widths.
P.S. This is an answer I had posted to another, duplicate question earlier this year.
<div class="select">
<select name="you_are" id="dropdown" class="selection">
<option value="0" disabled selected>Select</option>
<option value="1">Student</option>
<option value="2">Full-time Job</option>
<option value="2">Part-time Job</option>
<option value="3">Job-Seeker</option>
<option value="4">Nothing Yet</option>
</select>
</div>
Insted of styling the select why dont you add a div out-side the select.
and style then in CSS
.select{
width: 100%;
height: 45px;
position: relative;
}
.select::after{
content: '\f0d7';
position: absolute;
top: 0px;
right: 10px;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #0b660b;
font-size: 45px;
z-index: 2;
}
#dropdown{
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
height: 45px;
width: 100%;
outline: none;
border: none;
border-bottom: 2px solid #0b660b;
font-size: 20px;
background-color: #0b660b23;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
}
Instead of a wrapper element you can use CSS grid and place an icon (or whatever) in the same cell as the select:
.select-field {
display: grid;
grid-template:
"label"
"select"
/ max-content;
}
.label {
grid-area: label;
}
.select {
appearance: none;
background: white;
border: 1px solid var(--border-color);
grid-area: select;
padding-block: 0.5ex;
padding-inline: 1ch calc(1ch + 1em);
}
.after {
align-self: center;
border-block-start: 0.5em solid var(--border-color);
border-inline: 0.5em solid transparent;
block-size: 0;
grid-area: select;
inline-size: 0;
justify-self: end;
margin-inline-end: 1ch;
pointer-events: none;
}
.select,
.select + .after {
--border-color: silver;
}
.select:hover,
.select:hover + .after {
--border-color: grey;
}
.select:focus,
.select:focus + .after {
--border-color: rebeccapurple;
}
<div class="select-field">
<label for="my-select" class="label">Select One</label>
<select id="my-select" class="select">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>
<div class="after"></div>
</div>
Here I used an empty div to and styled it to be a CSS triangle which has the same color as the border which changes during hover/focus.
The most important bits here are the following:
The <select> and the <div class="after"> go into the same grid-area (which I named select). This will put the empty div over the select.
Give the <select> an appearance of none. This will remove any browser default style.
Give the <select> and extra padding at the end of the inline direction to make room for the empty style.
Justify the empty div to the end.
Give the empty div an extra margin at the end of the inline direction which matches your desired padding of the <select>
Give the empty div a pointer-events of none so the click will go through it to the <select> element.
Other then that you can do whatever with the empty div. It doesn’t even have to be empty. E.g. you can put an svg icon in there if you want.
If you chose to use the select::after method, remember that:
.select::after{
...
pointer-events: none;
...
for clickable..