CODEWITHSUNDEEP
htmlcssfontsplaceholder
Becky
Becky

Reputation: 2275

Placeholder font not changing

I attempted to change my placeholder font to match the rest of my input fields, but it does not seem to be working, but when I am looking at my site via my phone, the fonts are all the same.

The placeholder in question can be seen here. The font that is not changing is the message field, where it is a textarea. I'm not sure if that is what is causing this and if so, how to fix it.

http://sundayfundayleague.com/contact

I have this code in place:

textarea {
font-family: Helvectica;
font-size: 18px;
}
::-webkit-input-placeholder {
   font-style: Helvetica;
}

:-moz-placeholder { /* Firefox 18- */
   font-style: Helvetica; 
}

::-moz-placeholder {  /* Firefox 19+ */
   font-style: Helvetica; 
}

:-ms-input-placeholder {  
   font-style: Helvetica;
}
.inputbarmessage {
display: block;
width: 400px;
margin: 10px auto;
font-size: 18px;
padding: 10px;
-webkit-transition: all 0.40s ease-in-out;
-moz-transition: all 0.40s ease-in-out;
-ms-transition: all 0.40s ease-in-out;
-o-transition: all 0.40s ease-in-out;
outline: none;
border: 1px solid #DDDDDD;
}

HTML

<form action="" method="post" id="mycontactform" >
    <input type="text" class="inputbar" name="name" placeholder="Full Name" required>
    <input type="email" class="inputbaremail" name="email" placeholder="Email" required>
    <textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
    <label for="contactButton">
        <input type="button" class="contactButton" value="Send Message" id="submit">
    </label>
</form>

Does anyone see what I am doing wrong?

Upvotes: 1

Views: 3666

Answers (1)

kremalicious
kremalicious

Reputation: 1371

You want to use font-family, not font-style property, like so:

::-webkit-input-placeholder {
    font-family: Helvetica;
}
:-moz-placeholder {
    font-family: Helvetica;
}
::-moz-placeholder {
    font-family: Helvetica;
}
:-ms-input-placeholder {
    font-family: Helvetica;
}

Upvotes: 4

Related Questions