Enfold Forms - unable to change the background color of the fields Quick CSS - Support

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts

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 #508538

Andy

Inactive Moderator

Hey 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,
Andy

September 24, 2015 at 3:38 pm #508539

Elliott

Inactive Moderator

Hey AccelerateMe!

Try using the !important override like so.

input[type="text"], input[type="email"], textarea {
    background: red !important;
}

Cheers!
Elliott

June 1, 2017 at 10:15 pm #802789

webWahine

Participant

Hi 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 #802965

Rikard

Keymaster

Hi,

Your site is password protected.

Best regards,
Rikard

June 2, 2017 at 7:25 pm #803171

webWahine

Participant

Oh, 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 #803174

webWahine

Participant

Here’s a great artcile about it –

June 2, 2017 at 7:42 pm #803176

webWahine

Participant

Oops –