Apply CSS change to "moz" webkit CSS statements

Question

Hello: I have some code I am trying to update with some changes. The code has a form wiih input fields and if someone does not complete the fields on the form the code changes things on the form to "alert" them of an error. I have manage to make it so the background color of the fields changes and also I have added a little "red x" symbol to the background on the far right of the form field. The problem is that the CSS for the font size within the fields is written differently and I am not sure how to apply the CSS changes to it because of that. Here is my code:

here is the "starting CSS" for the input fields:

input, .Select span, .RFID_Modal, select#State {
padding: 0 10px;
width: 100%;
height: 40px;
line-height: 40px;
background-color: #aedaf3;
border: 1px solid #fff;
font-size: 16px;
color: #000;
font-family: 'FordAntenna Medium';
}

this piece of code basically adds some classes to the input fields if the error condition is true:

if($type != 'hidden')
    $autoForm_display = '<div class="Field '   .$error.'">'.$label.$field.'</div>';
else
    $autoForm_display = $field;

return $autoForm_display;

finally here is the "error CSS" I was able to modify and get working:

.Field.Error input, .Field.Error span {
background: #000000 url(./site/error.png) no-repeat right !important;
background-size: contain;
}

here is the "starting CSS" for the font color on the input forms:

::-webkit-input-placeholder { color: #414042; font-family: 'FordAntenna Medium'; }
::-moz-placeholder { color: #414042; font-family: 'FordAntenna Medium'; } /* firefox 19+ */
:-ms-input-placeholder { color: #414042; font-family: 'FordAntenna Medium'; } /* ie */
input:-moz-placeholder { color: #414042; font-family: 'FordAntenna Medium';    }

I am trying to add the ".Field.Error" class to the those CSS statements for the "color" and I cannot get them to work (not as simple as how I did the CSS to change background color etc above)...

So I am hoping someone can help me to update the CSS for the "color" items as well given how they are written....

thanks!

Matthew King · Accepted Answer · 2015-07-05 23:48:13Z

2

Can you use .Field.Error input::-moz-placeholder? This should override the "starting CSS" ::-moz-placeholder when the .Error class is on the surrounding input.

edited Jul 5, 2015 at 23:48

answered Jul 5, 2015 at 22:27

Matthew King

1,3627 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Apply CSS change to "moz" webkit CSS statements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related