How to change Select Field "Up & Down" icons

Design help General
#1

Hi everyone. I need some help, video below and many thanks in advance!

Here is my site Read-Only: Webflow - Bare Essentials

#2

hi @DroneMotionUK here is a simple example how to change arrow to unified it across browsers.

select {
  -webkit-appearance: none; 
  -moz-appearance: none; 
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 5px;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  margin-right: 2rem;
  padding: 1rem;
  padding-right: 2rem;
}

Here is one article if you want to know more but you can find more on net.

#3

Hello @Stan thank you for this, code is way beyond my pay grade. I am unfortunately one of the new kids on the block use Webflow without any training in code.

Where would this be placed? Thank you.

#4

oh sorry @DroneMotionUK my mistake, you can use embed for it.

#5

hi @DroneMotionUK do you need any further information “how to” ? If not feel free to close your issue.

#6

Hi Stan,

I used the embed element but the code is just all over the page. Not sure why.

Screenshot 2021-04-27 at 13.25.21
Screenshot 2021-04-27 at 13.25.211384×1630 230 KB

#7

hi @DroneMotionUK here is a short video how to use embed element.

if you will have some time to spare feel free to visit Webflow University to learn basics about this platform. :wink:

#8

Hi @Stan!

Thank you for that informative video. It did help!

On a side note: As you can see to the right-hand side of that form, I’m having trouble also with the text and social media icons… When browser changes size it goes all over the place.

This is how it’s meant to look:

0a530d9d25a4f7281ceff9930d8a3219019fd5b8_2_1124x1000
0a530d9d25a4f7281ceff9930d8a3219019fd5b8_2_1124x10001124×1000 121 KB

This is how it looks so far in the preview:

https://preview.webflow.com/preview/bare-essentials-627d97?utm_medium=preview_link&utm_source=designer&utm_content=bare-essentials-627d97&preview=df5d8be4e707953166ad20bc223738dc&mode=preview

#9

hi @DroneMotionUK I’m sorry but your last question doesn’t fall under original request topic.

If you have got answer to your How to change Select Field “Up & Down” icons request feel free to close this request by checking any response as solution.

Anyway, your last question is related to responsive design, so feel free to search this forum for answer before you will create a new request according to text responsiveness.

#10

Sadly he didn’t do that :frowning: