CreativeFlow Posted June 14, 2022 Share Posted June 14, 2022 Site URL: https://chloe-chow.squarespace.com/contact?noredirect Hello, I have a question related to my contact form. I have customised the radio and check box along with my select / drop down field. Here is my website: https://chloe-chow.squarespace.com/contact?noredirect pw: creativegrind I am trying to add back an arrow at the end of my select field however it's not working. Do you have an idea on how to do it ? I think I am using the wrong selector to add my arrow :after . Here is the code below : // *** CUSTOMIZED OPTION DROP MENU /* Resetting the Option menu */ .form-wrapper select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: @line solid;//*// border-radius: 5px; padding: 1rem; width: 100%; } /*Add an arrow*/ .sqs-block-form .field-list .option select:after { content:'⇲'; color: red !important; position: absolute; display: block; top: 55%; transform: translateY(-50%); right: 8%; pointer-events: none; } // Option Menu when Focused .form-wrapper select:focus, a:focus { outline-width: 0px; outline-style: solid; } What do you think ? Thanks !! Link to comment
tuanphan Posted June 15, 2022 Share Posted June 15, 2022 I guess select doesn't support pseudo element (:after, :before)? Try .sqs-block-form .field-list 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; } Reference: https://stackoverflow.com/questions/14218307/select-arrow-style-change Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
CreativeFlow Posted June 17, 2022 Author Share Posted June 17, 2022 Hey @tuanphan !! Thanks for your reply, I just saw it this morning. It works !! That's awesome ! I have a question can I manage to customise the drop down menu without any complicate javascript ?🤨 You know get rid of the blue / grey colors and all ... Let me know, thanks a loot for this arrow !! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment