Can't format html form elements (label and input) using CSS

Question

I'm having trouble editing a button using CSS. No matter what I do, all I can change is the color of the font (I've only tried color and font-weight). Is there a reason why I can't manipulate the html element using css?

#login-frame {
 color: #900;
}

#login-text {
 font-weight: bold;
}

<td>
 <label id="login-frame" for="login-text">
   <input value="Log In" tabindex="4" id="login-text" type="submit">
 </label>
</td>

possible dublicate - http://stackoverflow.com/questions/21664610/cant-style-text-on-input-submit-button-as-bold — Vitorino fernandes, Dec 03 '15 at 04:47
Maybe some of css below rewrites your style. Try to add `!important` after property definition: `#login-text { color: red !important; }` — userlond, Dec 03 '15 at 04:47
Do you want to change the font color for button? If yes, then use like this `#login-text input{color:red;}` — Suresh Ponnukalai, Dec 03 '15 at 05:01
seems okay to me.. was able to change lots of things: http://jsfiddle.net/3gfrxnLt/ — Michael Benjamin, Dec 03 '15 at 15:07

score 1 · Accepted Answer · answered Dec 03 '15 at 04:47

You need to set appearance: none, with the relevant vendor prefixes.

#login-frame {
 color: #900;
}

#login-text {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

 font-weight: bold;
}

<td>
 <label id="login-frame" for="login-text">
   <input value="Log In" tabindex="4" id="login-text" type="submit">
 </label>
</td>

score 0 · Answer 2 · answered Dec 03 '15 at 05:05

0

you have given the color code in wrong class as

 #login-frame 
 {
    color:/* #900;*/
 }

put in this class

 #login-text 
 {
     color: #990000;
     font-weight: bold;
 }

answered Dec 03 '15 at 05:05

Anubhav pun

1,323
2
8
20

Keval Bhatt · Answer 3 · 2015-12-03T05:16:48.417

what you did wrong :

you are applying color to parent not to child you can use

login-text{color}
login-frame input{color....}
login-frame #login-text{color....}

NOTE: You has to understand how css work

If you have to apply style from parent to child then use parent[space]child

If you want to apply style to child directly then use class or id of that element

Example 1: #login-text{color}

#login-text {
 font-weight: bold;
    color: #900;
}

<td>
 <label id="login-frame" for="login-text">
   <input value="Log In" tabindex="4" id="login-text" type="submit">
 </label>
</td>

Example 2: #login-frame input{color....} in example 2 you can also use

login-frame input#login-text

#login-frame input{
 color: #900;
}

#login-text {
 font-weight: bold;
}

<td>
 <label id="login-frame" for="login-text">
   <input value="Log In" tabindex="4" id="login-text" type="submit">
 </label>
</td>

Example 3: #login-frame #login-text{color....}

#login-frame #login-text{
 color: #900;
}

#login-text {
 font-weight: bold;
}

<td>
 <label id="login-frame" for="login-text">
   <input value="Log In" tabindex="4" id="login-text" type="submit">
 </label>
</td>

Can't format html form elements (label and input) using CSS

3 Answers3

login-text{color}

login-frame input{color....}

login-frame #login-text{color....}

login-frame input#login-text