Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • August 3, 2022 at 5:49 am #1360412
    mountainlover

    Hi,
    In my booking widget, the both input text fields for “adults” and “kids” count are in gray color on mobile, but in #000000 on other devices.
    Is any CSS from Enfold source code who applying an opacity on that field?
    They always should be in black #000000.
    Thanks,
    D

    August 3, 2022 at 9:45 am #1360443
    Ismael

    Hey Mountain,

    Thank you for the inquiry.

    The color of the text in the input field is already set to black when we checked. Did you add this css code?

    #mainContainer input.count {
    width: 40px !important;
    margin: 0px 5px;
    font-size: 1.2rem !important;
    color: #000!important;
}

    Best regards,
    Ismael

    August 3, 2022 at 3:23 pm #1360501
    mountainlover

    Hi Ismael,

    Yes that CSS code works perfectly on desktop but not on mobile.
    Looks like a CSS code takes over on small screens, I am wondering if it’s related to Enfold source code?
    Thanks

    August 3, 2022 at 5:56 pm #1360511
    Rikard

    Hi,

    Thanks for the update. Which device and browser are you using? If you could share a screenshot of what you are seeing on your end, then that would be helpful as well.

    Best regards,
    Rikard

    August 3, 2022 at 10:04 pm #1360546
    mountainlover

    Hi Rikard,
    I use an iPhone 12 mini and the color of the text is same on Chrome, Safari and Firefox Focus.
    I have attached a screenshot in the notes.
    You can try by yourself from any phone.
    Thanks!

    August 4, 2022 at 7:27 am #1360573
    Ismael

    Hi,

    Thank you for the update.

    We were able to reproduce the issue on an iPhone emulator. The number in the input field is faded because the opacity of the input field is set to 0.4. To fix the issue, we have to set the opacity of the quantity input element back to 1.

    Please add this css code in the Quick CSS field.

    #mainContainer div.qty input {
   opacity: 1 !important;
}

    You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

    Best regards,
    Ismael

    August 4, 2022 at 3:08 pm #1360639
    mountainlover

    Hi Ismael,
    That looks better thanks!
    It looks like the color is still not the #000 but a little bit lighter
    Any idea on the color pulled here?

    Thanks again!

    August 4, 2022 at 8:22 pm #1360698
    Rikard

    Hi,

    Thanks for the update. It looks correct on my end now, please see screenshot in private.

    Best regards,
    Rikard

    August 4, 2022 at 8:27 pm #1360701
    mountainlover

    Hi Rikard,

    Indeed it is, when resizing the window and looking from Inspect Element but it’s not on my phone.
    Looks lilke another color is applying

    August 5, 2022 at 11:49 am #1360779
    Yigit

    Hi,

    I have checked your website on my iphone however it looks correct on my end as well. I attached a screenshot in private content field below :)

    Regards,
    Yigit

    August 5, 2022 at 3:50 pm #1360818
    mountainlover

    Hi,
    Thanks for helping!
    At first glance the colors look same, but you can see the difference in the screenshot below
    It seems the color #545454 (#666666) overrides #000000 on mobile.

    August 7, 2022 at 9:53 pm #1361018
    Mike

    Hi,
    Thanks for the screenshot and link to your page, I checked with my Android phone and the fields are black, I don’t have an iPhone.
    Try this css:

     #top .main_color #mainContainer #adultCount,
 #top .main_color #mainContainer #kidsCount {
	opacity: 1 !important;
    color: #000 !important;
}

    Then clear your browser cache and any cache plugin, and check.
    Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

    Best regards,
    Mike

    August 10, 2022 at 12:37 am #1361292
    mountainlover

    Hi MIke,

    I tried that CSS but no success.
    I cleared cache on WordPress and I am testing on Firefox Focus + Chrome Incognito mode (css cleared)

    August 11, 2022 at 9:07 am #1361427
    Nikko

    Hi mountainlover,

    Can you try adding -webkit-text-fill-color to Mike’s code, so it should look like:

     #top .main_color #mainContainer #adultCount,
 #top .main_color #mainContainer #kidsCount {
    opacity: 1 !important;
    -webkit-text-fill-color:#000;
    color: #000 !important;
}

    Hope this helps.

    Best regards,
    Nikko

    August 11, 2022 at 12:48 pm #1361456
    Yigit

    Hey,

    I tried adding the code Nikko shared and “-webkit-text-fill-color: #000;” part seems to do the trick :)

    Best regards,
    Yigit

    August 11, 2022 at 2:35 pm #1361466
    mountainlover

    Hi Nikko, Yigit,

    I confirm it’s now working!
    Thank you very much

    August 11, 2022 at 2:47 pm #1361470
    Yigit

    Hi,

    Thanks for your confirmation!

    Let us know if you have any other questions and enjoy the rest of your day :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Input text fields wrong color on mobile’ is closed to new replies.