Tagged: ,

Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • December 16, 2016 at 9:40 am #725224
    millertimesites

    Yigit,

    I was able to customize the colors of the fonts, backgrounds, and borders for all of the contact form elements, but for some reason the drop down items in the Select element have a highlight and border color of #1e90ff for no reason on Chrome and #000000 on Firefox & Edge.

    Website Address
    http://6d6.7fe.myftpupload.com/contact/

    Screen Shot
    http://6d6.7fe.myftpupload.com/wp-content/uploads/2016/12/dropdowns.jpg

    Current CSS Code

    #top div .av-dark-form input[type='text'] {
   border-color: #C59C5F;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

#top div .av-dark-form textarea {
   border-color: #C59C5F;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

#top div .av-dark-form select {
   border-color: #C59C5F;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

#top div .av-dark-form select option {
   border-color: #C59C5F !important;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

#top .av-custom-form-color .button { 
    border-color: #C59C5F;
}

    Thanks
    Jon

    December 20, 2016 at 3:47 pm #726591
    Andy

    Hey Jon,

    are you talking about the blue highlight color? this is default browser function.

    Best regards,
    Andy

    April 21, 2017 at 4:25 pm #781298
    millertimesites

    I got the element select issue fixed I think, however, on mobile the email field has a thick black boarder instead of the thin gold one I have set.
    It only affects mobile and I have tried various css and can’t seem to fix this. Below is a screenshot and the css related to the contact forms I am using

    Final url http://www.itsgreektomemn.com/contact

    #top div .av-dark-form input[type='text'] {
   border-color: #C59C5F;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

#top div .av-dark-form textarea {
   border-color: #C59C5F;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

#top div .av-dark-form select {
   border-color: #C59C5F;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

#top div .av-dark-form select option {
   border-color: #C59C5F !important;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

#top .av-custom-form-color .button { 
    border-color: #C59C5F; font-weight: 700;
}

#top .avia-button.avia-color-dark {
border-color: #C59C5F; font-weight: 700; font-size: 16px; color: #23282d; 
}

#top .avia-button.avia-color-dark:hover {
background-color: #C59C5F; color: #23282d; 
}
    April 21, 2017 at 4:28 pm #781300
    millertimesites

    It seems to only affect the Email field which has a class “text_input is_email”.
    Issue only on mobile & tablet I believe, desktop is correct on Chrome, Firefox, & Edge.

    Jon

    April 24, 2017 at 6:14 am #782161
    John Torvik

    Hi,

    You can try two things:

    1) Clear your cache to have sure that isn`t a cache problem.

    2) Add the same code provided by Andy but inside a media query like this:

    @media screen and (max-width: 769px) {
   
}

    Best regards,
    John Torvik

    April 24, 2017 at 10:39 pm #782567
    millertimesites

    John,

    Thanks, I didn’t see any code that Andy provided but used you method as follows and it didn’t do the trick

    #top div .av-dark-form input[type='text'] @media screen and (max-width: 769px) {
   border-color: #C59C5F;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

    I had a feeling that mobile width media query wouldn’t work since the Email field is the only one being affected. All of the other Text Input fields on the are following the styling correctly except email. Have used Firebug to look at the source and can’t find way to fix it.

    Jon

    April 26, 2017 at 8:02 pm #783666
    Andy

    Hi,

    unfortunately I get an error when trying to open link you’ve provided: http://imgur.com/a/X0Qyr
    Can you check that please? cause we need to be able to inspect the elements in question.

    Best regards,
    Andy

    April 26, 2017 at 10:32 pm #783717
    millertimesites

    hmm, the website is up and working fine for me
    http://www.itsgreektomemn.com/contact/

    April 28, 2017 at 10:50 am #784412
    Andy

    Hi,

    you need to add an !important to border-color:

    @media screen and (max-width: 769px) {
#top div .av-dark-form input[type='text'] {
   border-color: #C59C5F !important;
}}

    Best regards,
    Andy

    May 1, 2017 at 4:35 pm #785842
    millertimesites

    Andy,
    Thanks I had tried that and am still getting the same issue.
    It is working for all of the text fields except Email, like the screenshots above

    Jon

    May 2, 2017 at 4:45 am #786094
    Rikard

    Hi Jon,

    It seems to be working on my end, please see screenshot in private.

    Best regards,
    Rikard

    May 3, 2017 at 7:52 pm #787346
    millertimesites

    Rikard,

    Saw your screenshot, however, it is an issue on mobile devices (iPhone & Android as well as some iPads), desktop has been fine.
    See my screenshots above.

    Jon

    May 3, 2017 at 8:14 pm #787356
    Andy

    Hi,

    your login link does not work for me. However, I checked your source code and I can see that you’re missing an !important for border-color: http://imgur.com/a/JUXPE

    Best regards,
    Andy

    May 3, 2017 at 8:22 pm #787363
    millertimesites

    Thanks, the !important did not appear to fix it.
    Have applied and clear both the website and phone browser cache.

    May 3, 2017 at 8:58 pm #787395
    Andy

    Hi,

    maybe it’s about a cache issue, so check that. But I guess some custom code you’re using is causing a conflict. So I suggest to remove all custom code completely, to check that.

    Best regards,
    Andy

    May 3, 2017 at 9:07 pm #787402
    millertimesites

    In troubleshooting I did delete all of the CSS code except this and still had the issue

    
@media screen and (max-width: 769px) {
#top div .av-dark-form input[type='text'] {
   border-color: #C59C5F !important;
  border-width: 1px !important;
  background-color: #ffffff !important;
}}

    Still had the issue with the Email field plus the addition of anything with a drop down selector.
    The drop down selectors were fixed with the following code, but the email field just wont take the styling, even with all the other CSS cleared out. Is there something goofy maybe with the class “text_input is_email”?

    #top div .av-dark-form select {
   border-color: #C59C5F !important;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

#top div .av-dark-form select option {
   border-color: #C59C5F !important;
  border-width: 1px !important;
  background-color: #ffffff !important;
}

    Jon

    May 4, 2017 at 10:41 pm #788099
    Basilis

    Hi,

    Please try the following

    @media screen and (max-width: 769px) {
#top div .av-dark-form input[type='email'] {
   border-color: #C59C5F !important;
  border-width: 1px !important;
  background-color: #ffffff !important;
}}

    Let me know if it does any difference, as pseudo element

    Best regards,
    Basilis

    May 4, 2017 at 10:53 pm #788113
    millertimesites

    NICE, That worked great!
    Had tried that but used the entire class name instead of just ’email’
    I think I’m all good now.

    Noticed an issue with the only mobile and only desktop classes not working anymore, but will open a new ticket on that.

    @media only screen and (max-width: 990px) {
.only-dt { display: none !important; }}
@media only screen and (min-width: 990px) {
.only-mo { display: none !important; }}
@media only screen and (max-width: 990px) {
.only-desktop { display: none !important; }}
@media only screen and (min-width: 990px) {
.only-mobile { display: none !important; }}

    Thanks again!

    May 5, 2017 at 7:43 am #788239
    Nikko

    Hi,

    Glad to hear that! We will be answering on your other thread. Thanks for using Enfold :)

    Best regards,
    Nikko

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Enfold Contact Form Drop Down Selector Colors’ is closed to new replies.