-
AuthorPosts
-
September 24, 2015 at 12:27 am #508116
Forms – unable to change the background color of the fields.
I’m in the wp-admin > enfold > general styling > Quick CSS.
I’ve made other changes in there before that take.This is what I’m trying to change:
#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select { border-color: #000000; background-color: #595959; color: #808080; }
^ I got that from F12 in Chrome. Refreshed, reloaded.
Viewed in FF – same thing.
Emptied cache, same thing.This is what I have in the Quick CSS area of the wp-admin:
input, input[type='text'] {color:#333;background:#fff;} .entry-content p {font-size:110%;} .av_one_half {font-size:90%;} .av_one_third {margin-left:3%;} #avia-menu a:link, #avia-menu li a:visited {color:#efefef;} * .ls-container .ls-bottom-nav-wrapper {visibility:hidden;display:none;} .title_container .main-title {color:#efefef;font-family: "'Ubuntu', sasns-serif;font-size:48px;font-weight:700;padding-bottom:15px;} .content {padding-top:0px;} #top #main .sidebar, {border-left:1px solid #d6d4d1;} .entry-content-wrapper div li {list-style:square;list-style-position:inside;line-height:1.8em;} .menu {text-transform:lowercase; } .main_color .sidebar {color:#efefef;} div.wpcf7-response-output {font-size:2em;} span.avia-menu-text {border-right:1px solid #d6d4d1;padding-right:14px;padding-top:10px;padding-bottom:10px;border-top:0px;border-bottom:0px;border-left:0px;font-weight:700;} . menu-item-top-level-1 {margin:2px;} .header_color .main_menu ul:first-child a {color:#fff;} <strong>#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select {background-color:#efefef;background-color:#efefef;}</strong> .title_container .main-title {line-height:115%;} @media only screen and (max-width: 501px) { .entry-content p {font-size:1.5em;line-height:115%;} }
———————
The other elements work fine. Trying to change all of the form input fields to be #efefef background is not working.
Any suggestions as to why it is not coming in as I stated?September 24, 2015 at 3:38 pm #508538Hey AccelerateMe!
try to add an !important into your code:
#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color input[type='password'], #top .main_color input[type='email'], #top .main_color input[type='number'], #top .main_color input[type='url'], #top .main_color input[type='tel'], #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select { border-color: #000000 !important; background-color: #595959 !important; color: #808080 !important; }
Best regards,
AndySeptember 24, 2015 at 3:38 pm #508539Hey AccelerateMe!
Try using the !important override like so.
input[type="text"], input[type="email"], textarea { background: red !important; }
Cheers!
ElliottJune 1, 2017 at 10:15 pm #802789Hi there
I used similar code, below, but for some reason the fields that are required do not change to #666. This links to a PHP file and an external DB and I even tried to create an inline class called requiredFields to style in the PHP but nothing seems to make a change. Any ideas?#top .main_color .input-text, #top .main_color input[type='text'], #top .main_color input[type='input'], #top .main_color textarea, #top .main_color select { border-color: #666 !important; background-color: #fff !important; color: #666 !important; }
June 2, 2017 at 12:20 pm #802965June 2, 2017 at 7:25 pm #803171Oh, sorry, but I have it figured out!
Digging very deeply there’s some browser specific code that makes it work! This took ages to find so hopefully this helps someone else..main_color input::-moz-placeholder { /* firefox newer */ color: #ec1b24 !important; } .main_color input::-webkit-placeholder { /* Chrome/Opera/Safari */ color: #ec1b24 !important; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ec1b24 !important; } ::-moz-placeholder { /* Firefox 19+ */ color: #ec1b24 !important; } :-ms-input-placeholder { /* IE 10+ */ color: #ec1b24 !important; } :-moz-placeholder { /* Firefox 18- */ color: #ec1b24 !important; }
June 2, 2017 at 7:42 pm #803174June 2, 2017 at 7:42 pm #803176June 2, 2017 at 7:55 pm #803179Hi,
Great Job. Thanks for sharing the solution, we appreciate it and thanks for using Enfold :)
Best regards,
NikkoJune 2, 2017 at 8:18 pm #803191This took me ages so I’m happy to help everyone out!!!! :)
June 3, 2017 at 7:22 am #803287 -
AuthorPosts
- You must be logged in to reply to this topic.