Styling Placeholders

HTML-CSS
1

Howdy! I have a form for submission of basic information. I am trying to style all of the placeholders (font-family, size, etc.). I can’t seem to make that work. I tried ::placeholder, but not sure where to put it? I don’t want to have to add styles to every placeholder, because i have a bunch. Any help?? Thanks so much

<input type="hidden" name="id" value="14408" />

<label>First Name: </label><input type="text" name="first_name" value="" placeholder="First Name"/><br/>
<label>Last Name: </label><input type="text" name="last_name" value="" placeholder="Last Name"/><br/>
<label>Date Of Birth: </label><input type="text" name="custom2" value="" placeholder="Date of Birth" /><br/>
<label>Gender: </label><select class="gender" name="gender"><option value=""></option><option value="0">Female</option><option value="1">Male</option><option value="2">Non-Binary</option></select><br/>
<label>Phone Number: </label><input type="text" name="mobile_phone" value="" placeholder="Phone Number"/><br/>
<label>Email: </label><input type="text" name="email" value="" placeholder="Email" /><br/>
<label>Street Address: </label><input placeholder="Address 1" type="text" name="address1" value="" /><br/>
<label>City: </label><input placeholder="City" type="text" name="city" value="" /><br/>
2

here documentation on the placeholder pseudoelement: ::placeholder - CSS | MDN

3

Thank you ILM. I saw documentation about ::placeholder, but what is the context? Where do i place it so it will format each placeholder?

image
image1228×433 44.8 KB

4

in your css file

have you already worked with css?

5

I am trying to add the styling to this code snipped

6

you can’t use inline styling with a pseudoelement

you may want to do the course on html and css: https://www.freecodecamp.org/learn/responsive-web-design-v9/

7

thank you. is there any way to achieve this within the code snippet? I suppose i could add styling elements to each line, but that does not make sense.

8

you can’t style the placeholder with the style attribute, you need to use proper CSS

9

is there a way to add css to this code snippet?

image
image1470×838 139 KB

10

you may want to go through the course, I gave you the link so you can learn

that is not the code to pass step 5 of the curriculum outline workshop

this forum is here to help people wanting to learn to code, we do not write code

11

Thank you, ILM. I am trying to understand if what I am trying to do is possible. I am trying to integrate the above code snippet into my website, but its styling is not consistent with my current website. So I am constrained. I could add style elements to each placeholder, but i don’t want to use that approach. i am hoping i can add one style element to apply to each placeholder in this code snippet.

12

you can always have only one style element for the page

13

so i can style either the placeholder or the labels only?

14

uh? you can put multiple selectors in a style element

or what do you mean by style element?

you would really benefit from the course