Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • April 2, 2019 at 4:49 pm #1086150
    nestormakhno

    Hi there, I am using a contact form with light transparent appearance inside a color section.
    The light transparent form looks great on the background. However, the select element’s dropdown is white… the same colour as the text so it is not visible unless you actually highlight the selection.
    Normally I’d see what element was at fault by inspecting the element in chrome and attempt to fix it with custom CSS.
    This is not possible for dropdowns however – so what CSS should I add to have the background of the dropdown transparent?

    Select Element has white BG & text

    April 2, 2019 at 7:31 pm #1086220
    Victoria

    Hey nestormakhno,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    April 11, 2019 at 3:02 pm #1089579
    nestormakhno

    Hi Victoria – this one of 3 different threads I have started, all of which got stalled by the inability of wordpress.com’s set-up to allow me to create temp users for you – I have now had to post my own log-in to get these fixed. Details are in the private content below.

    I’d be grateful, if you have success with it, if you could also use the login to deal with the other 2 posts:

    Contact submit button stuck on 'Authenticating' with Captcha v3

    Accordion slider doesn't show images.

    Many thanks – and sorry for the delayed reply.

    April 13, 2019 at 2:58 pm #1090366
    Victoria

    Hi nestormakhno,

    I did not find the form that you have above, the form on the contact page is on white background. Where can I see the form in question?

    Best regards,
    Victoria

    April 14, 2019 at 2:16 pm #1090619
    nestormakhno

    Hi Victria,

    Sorry about that, I moved the internal structure around…

    Try this:

    Website Needs

    April 17, 2019 at 10:02 am #1091886
    nestormakhno

    In case you need to login, I have set a user on the site that I migrated to my new server. Please note that it is a recent migrate so if you don’t see the colourful version of my site then please use the IP for a hosts file.

    April 17, 2019 at 1:21 pm #1091992
    Victoria

    Hi nestormakhno,

    Please try the following css:

    
#top div .av-light-form select option {
  color: #4f5358;
}

    Best regards,
    Victoria

    April 17, 2019 at 1:43 pm #1092001
    nestormakhno

    Thanks Victoria, that helps.

    I notice a very interesting thing with Chrome auto-complete: as well as completing the details it also copies in styling info, as you can see in the first 4 fields of this form. Is there any way of preventing that?

    Autocomplete glitch?

    April 18, 2019 at 7:56 am #1092314
    Victoria

    Hi nestormakhno,

    I tried this code but it does not seem to affect it:

    
#top input:-webkit-autofill, #top  textarea:-webkit-autofill, #top select:-webkit-autofill {
    background-color: rgba(232, 240, 254, 0.01) !important;
    background-image: none !important;
    color: #fcfcfc !important;
}

    Best regards,
    Victoria

    June 30, 2020 at 8:00 pm #1226901
    HLL_Virtual_Bookkeeping

    did you ever figure out the proper code for this? im having the same issue.

    June 30, 2020 at 9:14 pm #1226913
    Jordan Shannon

    Hey HLL_Virtual_Bookkeeping,

    Please provide a link to your site so we can look into this further.

    Best regards,
    Jordan Shannon

    June 30, 2020 at 9:25 pm #1226924
    HLL_Virtual_Bookkeeping

    See below

    June 30, 2020 at 11:00 pm #1226944
    Jordan Shannon

    Hey HLL_Virtual_Bookkeeping,

    Try adding this to quick css:

    .avia-builder-el-102 select option{
color:#000!important;
}

    Best regards,
    Jordan Shannon

    July 1, 2020 at 12:28 am #1227031
    HLL_Virtual_Bookkeeping

    still doesn’t work

    July 2, 2020 at 4:05 am #1227358
    Rikard

    Hi HLL_Virtual_Bookkeeping,

    In which browser and operating system are you seeing this? I’m asking since I can’t see any problem on my end using Chrome on OSX.

    Best regards,
    Rikard

    July 2, 2020 at 4:16 am #1227361
    HLL_Virtual_Bookkeeping

    its happening in chrome and edge on windows

    July 3, 2020 at 6:13 am #1227642
    Ismael

    Hi!

    Thank you for the update.

    This is the same css code that we provided above.

    #top input:-webkit-autofill, #top  textarea:-webkit-autofill, #top select:-webkit-autofill {
    background-color: transparent !important;
    background-image: none !important;
    color: #000000 !important;
}

select option {
    color: #000000 !important;
}

    It doesn’t work yet because the Performance > File Compression settings are enabled. Please toggle or disable the css and js compression temporarily after adding the css code.

    Cheers!
    Ismael

    July 6, 2020 at 3:34 pm #1228310
    HLL_Virtual_Bookkeeping

    it still isn’t working.

    July 10, 2020 at 9:50 am #1229359
    Ismael

    Hi,

    Thank you for the update.

    This is how the site or the select options look on MS Edge.

    Screenshot: https://imgur.com/YOa0kn6

    For the text placeholder, you can use this:

    ::-webkit-input-placeholder { /* Edge */
  color: white;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: white;
}

::placeholder {
  color: white;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • You must be logged in to reply to this topic.