+ 5

My friends am stuck, how do i change a text color and font in a <form></form>

HTML...help

14th May 2017, 7:06 AM
Raz
Raz - avatar
10 Réponses
+ 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@example.com" ><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 ;) ).
15th May 2017, 2:38 AM
visph
visph - avatar
+ 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 ;)
14th May 2017, 7:56 AM
visph
visph - avatar
+ 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
14th May 2017, 7:18 AM
Complex
Complex - avatar
+ 7
Hey I got something wrong with it heres the correct one! <form style="color:blue; font-family: 'Courier New';"></form>
14th May 2017, 2:15 PM
Complex
Complex - avatar
+ 6
your CSS is written wrong try my suggestion or vishp's
14th May 2017, 2:26 PM
Burey
Burey - avatar
+ 6
Aww! But it's okay @Burey and @vishp's suggestions are better! xD
14th May 2017, 3:02 PM
Complex
Complex - avatar
+ 5
CSS: input{ color:red; font-family:"Times New Roman"; } if you wish to change the inputs style apply it on the inputs
14th May 2017, 7:21 AM
Burey
Burey - avatar
+ 5
do you have a code we can experiment on?
14th May 2017, 2:09 PM
Burey
Burey - avatar
+ 3
@C0MPL3X and Burey, it didn't work.
14th May 2017, 1:43 PM
Raz
Raz - avatar
+ 3
yes, i ve named it "form...checked"
14th May 2017, 2:10 PM
Raz
Raz - avatar