0

I have macbook and i want to remove style of options list mac os style and customize it. How can i do that?

The point is that there is ready dropdown and i need to customize it using only id attribute and css code. (im making bubble.io plugin to customize dropdown list)

`function(instance, properties, context) {
  
    
    let customDropdown = `
#${properties.dropdown_id}>option {
            -webkit-appearance: none; 
            -moz-appearance: none;
            appearance: none;
}
        #${properties.dropdown_id} {
            -webkit-appearance: none; 
            -moz-appearance: none;
            appearance: none;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            background: url(${properties.arrow}) no-repeat ;
            background-size: 15px 15px;
            background-position: right 5px center;
        }
        #${properties.dropdown_id}::before {
                    top: 0;
                    left: 15;
                    content: '${properties.placeholder}';
                    color: ${properties.placeholder_color};
                    position: absolute;
                    display: block;
                    text-align: center;
                    background: ${properties.placceholder_bgcolor};
                }

                        /* The container must be positioned relative: */
        #${properties.dropdown_id} {
              position: relative;
              font-family: Arial;
            }

        #${properties.dropdown_id}>select {
              display: none; /*hide original SELECT element: */
            }

        #${properties.dropdown_id}>selected {
              background-color: DodgerBlue;
            }

            /* Style the arrow inside the select element: */
       #${properties.dropdown_id}>selected:after {
              position: absolute;
              content: "";
              top: 14px;
              right: 10px;
              width: 0;
              height: 0;
              border: 6px solid transparent;
              border-color: #fff transparent transparent transparent;
            }


            /* style the items (options), including the selected item: */
            .select-items div,.select-selected {
              color: #ffffff;
              padding: 8px 16px;
              border: 1px solid transparent;
              border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
              cursor: pointer;
            }

            /* Style items (options): */
            .select-items {
              position: absolute;
              background-color: DodgerBlue;
              top: 100%;
              left: 0;
              right: 0;
              z-index: 99;
            }

            /* Hide the items when the select box is closed: */
            .select-hide {
              display: none;
            }

            .select-items div:hover, .same-as-selected {
              background-color: rgba(0, 0, 0, 0.1);
            }

        `;
    
    instance.data.applyCSS(customDropdown);

}`

I started with this code but its ignoring and putting stock options list like in MacOS

  • 2
    It's not possibe to do a lot of styling of a select element using only CSS. You may find you have to implement your own select. There 's a lot of help out there already if you search. – A Haworth Apr 11 '23 at 09:24

0 Answers0