New course! Every coder should learn Generative AI!
Try a free lesson+ 5
My friends am stuck, how do i change a text color and font in a <form></form>
HTML...help
10 Answers
+ 5
It's better ( more safe regarding of display behaviours ) to write complete html code rather than just content ( browsers will have to correct/complete it implicitly, as they can ^^ )... minimal html code is the one created in a new web code playground:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<form>
<input type="text" placeholder="first name" ><br>
<input type="text" placeholder="surname" ><br>
<input type="number" placeholder="mobile" ><br>
<input type="text" placeholder="[email protected]" ><br>
<input type="password" placeholder="passcode"><br>
<input type="submit" value="sign up"/>
</form>
</body>
</html>
By the way, I little corrected it: <input>s element doesn't have a closing tag ( </input> is not valid )...
Anyway, your css code isn't valid neither:
input { style=color:red;
font-family:today;
}
You have to know than targetting <input> element will target ALL <inputs> ( of any 'type' -- the <input type="submit"> will be styled vy these rules too )...
To target specifically <input type="text"> yo need to modify your selector: input[type=text].
However, your rules are not valid, as there is an unexpected 'style=' probably forgotten when you copy past it from inlined style :P
Valid rule is:
input[type=text] {
color:red;
font-family:today;
}
But have you read my previous post?
'color' will only change the text color of user entries ( the 'value' attribut content ), and not the placeholder text color ^^
A last thing to know: if the font name used at 'font-family' is one of your local installed font, you cannot expect that other users will have it available ( or worst, that they have another flavour under same name :P )... If you want use specific fonts, try rather to embed web fonts ( https://fonts.google.com ;) ).
+ 9
If you want to change the placeholder color, you need to use prefixed css pseudo-selector:
input::-webkit-input-placeholder { color: red; }
input:-moz-placeholder { color: red; } /* only one colon (:) for FF 18- */
input::-moz-placeholder { color: red; }
input:-ms-input-placeholder { color: red; }
Anyway, I think rememberto have encountered some problems to change color of input on apple devices ( don't remember if desktop or mobile )... and it seems to myself, that I finally fix it, by putting a -webkit- prefixed property in addition to the common 'color' one:
input[type=text] {
color: red;
-webkit-text-fill-color: red;
}
Not sure that was the good trick, but hope this will help ;)
+ 8
Here:
<form style="color:blue; font-family: 'Courier New'>
</form>
You can change the values in the style, if it doesnt work tell me
+ 7
Hey I got something wrong with it heres the correct one!
<form style="color:blue; font-family: 'Courier New';"></form>
+ 6
your CSS is written wrong
try my suggestion or vishp's
+ 6
Aww! But it's okay @Burey and @vishp's suggestions are better! xD
+ 5
CSS:
input{
color:red;
font-family:"Times New Roman";
}
if you wish to change the inputs style apply it on the inputs
+ 5
do you have a code we can experiment on?
+ 3
@C0MPL3X and Burey, it didn't work.
+ 3
yes, i ve named it "form...checked"
Often have questions like this?
Learn more efficiently, for free:
Hot today
Android studio Tutorial
1 Votes
Why output is 0 for from_chars
2 Votes
Cyber security
0 Votes
Personal chat
1 Votes
Bash
0 Votes
Why exception is not handled
1 Votes
Adding image to html
0 Votes
Links of cmy codes
4 Votes
Error...
1 Votes