+ 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

10 odpowiedzi

+ 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

+ 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

+ 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