CODEWITHSUNDEEP
htmlcss
efong5
efong5

Reputation: 526

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

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>

Upvotes: 1

Views: 250

Answers (3)

Keval Bhatt
Keval Bhatt

Reputation: 6322

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>

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

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;
 }

Upvotes: 0

Kyle O
Kyle O

Reputation: 1618

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>

Upvotes: 1

Related Questions