Click here to Skip to main content
15,907,687 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
This is my HTML Code

I have created a change password form. The placeholder text is displayed in SERIF format. I have tried changing everything but nothing is changing the placeholder to sans-serif. Is it not at all possible to change the font-family of placeholder ?

<form class="form-horizontal" role="form" name="changePwdForm" method="POST" action="">

                     <div class="form-group">
                         <label class="sr-only" for="inputPassword">Current Password</label>
                         <input class="form-control form-input-text" name="currentPassword" type="password" id="currentPassword" maxlength="15" placeholder="Enter Current Password" required>
                     </div>
                     <div class="form-group">
                         <label class="sr-only" for="inputPassword">New Password</label>
                         <input class="form-control form-input-text" name="newPassword" type="password" id="inputPassword" maxlength="15" placeholder="Enter New Password" onkeyup="validateNewPassword(); return false;" required>
                         <span id="validateMessage"></span>
                     </div>
                     <div class="form-group">
                         <label class="sr-only" for="inputPassword">Re-Enter New Password</label>
                         <input class="form-control form-input-text" name="confirmPassword" type="password" id="confirmPassword" maxlength="15" placeholder="Confirm New Password" onclick="validateSubmit();" onkeyup="checkPassword(); return false;" required>
                         <span id="confirmMessage"></span>
                     </div>

                     <div class="center-block">
                         <input name="submit" type="submit" class="btn btn-lg center-block form-btn" value="Submit">
                     </div>
                 </form>


What I have tried:

input {
	font-family: "Times New Roman", sans-serif;
}
::-webkit-input-placeholder {
    font-family: "Times New Roman", sans-serif;
}
:-moz-placeholder {
    font-family: "Times New Roman", sans-serif;
}
::-moz-placeholder {
    font-family: "Times New Roman", sans-serif;
}
:-ms-input-placeholder {
    font-family: "Times New Roman", sans-serif;
}
.form-input-text {
	font-family: "Times New Roman", sans-serif;
}


This is my css code snippet
Posted
Comments
Graeme_Grant 13-Sep-17 2:51am    
Is this site-wide or just in one place?

If site-wide, You should go in your bootstrap file bootstrap.min.css find font-family and put the one you want.
GaneshRfromSpace 13-Sep-17 3:24am    
I want it across all screens of my project.
Graeme_Grant 13-Sep-17 3:25am    
The simplest fix is to go into your bootstrap file bootstrap.min.css find font-family and put the one you want.

Try to use !important.


//==================================
.form-input-text
{
font-family: "Times New Roman", sans-serif !important;
}

//==================================
 
Share this answer
 
<pre>::-webkit-input-placeholder { font-family: "Times New Roman", sans-serif !important;}
::-moz-placeholder { font-family: "Times New Roman", sans-serif !important; } /* firefox 19+ */
:-ms-input-placeholder { font-family: "Times New Roman", sans-serif !important; } /* ie */
input:-moz-placeholder { font-family: "Times New Roman", sans-serif !important; }


Try this code and Demo Here
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900