CODEWITHSUNDEEP
htmlcss
Thomas Spade
Thomas Spade

Reputation: 744

HTML Input Submit Button Won't Change Color

I have a form with a submit button that I'm trying to change the color to. This should be very simple, but my css isn't working and I can't figure out why.

The CSS:

input[type="submit"]{color: red;}

Fiddle: https://jsfiddle.net/zn7xrv60/

This is driving me nuts, any help would be appreciated.

Upvotes: 1

Views: 4396

Answers (5)

Mark At Ramp51
Mark At Ramp51

Reputation: 5501

It seems there are two issues.

The first is what Tieson T mentioned in his comment. Which is that your selector is being over written by a more specific selector. This can be "fixed" by using "!important" which isn't a preferred, but is an easy way around an issue like this.

The other issue is that the submit button requires you to set the text-shadow. Try this out:

input[type="submit"]
{
  color: red !important;
  text-shadow: 0px 0px 0px red !important;
}

This CSS rule is what is causing you to have to override the text-shadow:

input{
    color: #f08200;
    text-shadow: 0px 0px 0px #000;
    -webkit-text-fill-color: transparent;
}

So another option is to remove the text shadow property from this rule, and then you won't need it specified in the first rule.

UPDATE

As Chava G, pointed out in the comments another reason the color is not showing is because -webkit-text-fill-color is set to transparent.

Additionally, since the text shadow has no vertical or horizontal offset the shadow wouldn't be visible if the -webkit-text-fill-color was not transparent.

The input css rule above is a little "confused", it sets the "color" property which might imply you want the text a certain color, but then applies a text shadow that would be hidden behind the text. Followed by that it makes the text itself transparent, so it's no longer hiding the shadow which is a different color than what was set for the "color" property.

Upvotes: 0

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

If you examine that input, you'll see it's taking its color from the following code block, which has more specific selectors:

.login_content .container input[type="submit"]{
width: auto;
padding: 10px 50px;
border-radius: 25px;
background: #e8e8e8;
color: #c5c5c5;
text-transform: uppercase;
border: none;
cursor: pointer;
}

Also, this rule on the input tag, says the text color should be transparent:

-webkit-text-fill-color: transparent;

Here's your jsFiddle with red text.

Use your browser's dev tools to for this type of debugging.

Upvotes: 1

KaoriYui
KaoriYui

Reputation: 922

The problem is in your input text shadow, try changing it like below then make changes what you want it to be.

From

input{
        color: #f08200;
        text-shadow: 0px 0px 0px #000;
        -webkit-text-fill-color: transparent;
    }

To

input{
    color: #f08200;
    text-shadow: 0px 0px 0px red;
    -webkit-text-fill-color: transparent;
}

Upvotes: 4

pavithra
pavithra

Reputation: 336

since your login button is disabled at the time you need to do something like this.

.login_content .container .submit input:disabled {
//css
}

Upvotes: 0

Mindless
Mindless

Reputation: 2357

.login_content .container input[type="submit"] {
     background: red;
 }

Upvotes: 1

Related Questions