Menu icon Foundation
CSS override file not working as expected

I am upgrading a very old php web site. I have foundation 5 running with traditional css being used. I want to change the background and text colors for my form elements. Firebug points to line 4397 of foundation.css. In firebug I can change the background-color and color properties and they change the page as expected. I copied the following css section from foundation.css and copied it to my override.css file. Changing background-color and color properties in override.css has no effect. Any help will be appreciated.

/* We use this to get basic styling on all basic form elements */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  background-color: #AABC1E;
  font-family: inherit;
  border: 1px solid #000000;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  height: 2.3125rem;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
  -moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
  transition: box-shadow 0.45s, border-color 0.45s ease-in-out; }

cssoverride

I am upgrading a very old php web site. I have foundation 5 running with traditional css being used. I want to change the background and text colors for my form elements. Firebug points to line 4397 of foundation.css. In firebug I can change the background-color and color properties and they change the page as expected. I copied the following css section from foundation.css and copied it to my override.css file. Changing background-color and color properties in override.css has no effect. Any help will be appreciated.

/* We use this to get basic styling on all basic form elements */
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  background-color: #AABC1E;
  font-family: inherit;
  border: 1px solid #000000;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.75);
  display: block;
  font-size: 0.875rem;
  margin: 0 0 1rem 0;
  padding: 0.5rem;
  height: 2.3125rem;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: -webkit-box-shadow 0.45s, border-color 0.45s ease-in-out;
  -moz-transition: -moz-box-shadow 0.45s, border-color 0.45s ease-in-out;
  transition: box-shadow 0.45s, border-color 0.45s ease-in-out; }
Lance Earl over 5 years ago

I should also mention that override.css is loading correctly because I have changed styling for several other sections of foundation.css and they are working as expected. Thanks.

Brandon Arnold over 5 years ago

This codepen should help solve this if you haven't already http://cdpn.io/iLwcI