Custom cute select

Bootstrap Studio Help
1

Hello!

Do you have any component for custom dropdown list (alias select) like this one?
image

Thank you,
Enrico

2

If you’re using sass, you might be able to adjust some variables.

Otherwise… use a standard select in your form, give it a class of custom-select and add the following to your css

.custom-select {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.633 20.633' style='enable-background:new 0 0 20.633 20.633' xml:space='preserve'%3E%3Cpath d='m10.79 15.617 9.648-9.646c.133-.131.195-.301.195-.473s-.062-.344-.195-.473l-.012-.012a.66.66 0 0 0-.472-.195h-4.682a.656.656 0 0 0-.473.195l-4.48 4.479-4.48-4.479a.672.672 0 0 0-.473-.195H.684a.66.66 0 0 0-.475.195l-.013.012A.657.657 0 0 0 0 5.498a.66.66 0 0 0 .196.473l9.648 9.646a.666.666 0 0 0 .946 0z'/%3E%3C/svg%3E%0A") right .75rem center no-repeat,
    
    linear-gradient(to left, rgba(111, 105, 224, 0.808) 2.5rem, rgba(255,255,255,1) 2.5rem);  

    background-size: 15px 15px, 100%;
}

This will give you this:

image

To change the background color, change the linear-gradient (currently rgba(111, 105, 224, 0.808) )

To change the arrow size, change the background-size (15px 15px)

To change the color of the arrow add ;fill:yourcolor to the svg style

I’m not sure how ‘bullet-proof’ this will be, just something I knocked up. There may be better ways to do it.

2 Likes