如何更改< input>的占位符的font-family？元素？ [英] How do I change the font-family of the placeholder of <input> elements ?

问题描述

这是我的HTML代码



我创建了一个更改密码表单。占位符文本以SERIF格式显示。我试过改变一切，但没有什么东西把占位符改为sans-serif。是不是可以改变占位符的font-family？

< form class =form-horizo​​ntalrole = formname =changePwdFormmethod =POSTaction => 
 
< div class =form-group> 
< label class =sr-onlyfor =inputPassword>当前密码< / label> 
< input class =form-control form-input-textname =currentPasswordtype =passwordid =currentPasswordmaxlength =15placeholder =Enter Current Passwordrequired> 
< / div> 
< div class =form-group> 
< label class =sr-onlyfor =inputPassword> New Password< / label> 
< input class =form-control form-input-textname =newPasswordtype =passwordid =inputPasswordmaxlength =15placeholder =Enter New Passwordonkeyup =validateNewPassword （）;返回false;所需> 
< span id =validateMessage>< / span> 
< / div> 
< div class =form-group> 
< label class =sr-onlyfor =inputPassword>重新输入新密码< / label> 
< input class =form-control form-input-textname =confirmPasswordtype =passwordid =confirmPasswordmaxlength =15placeholder =Confirm New Passwordonclick =validateSubmit （）; onkeyup =checkPassword（）; return false;所需> 
< span id =confirmMessage>< / span> 
< / div> 
 
< div class =center-block> 
< input name =submittype =submitclass =btn btn-lg center-block form-b​​tnvalue =Submit> 
< / div> 
< / form> 
 

我的尝试：

输入{
 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; 
} 

这是我的css代码片段

解决方案

尝试使用！important。 
 
 
 // ================================== 
 .form-input-text 
 {
 font-family：Times New Roman，sans-serif！important; 
} 
 
 // ================================== / pre> 

< pre> ::  -  webkit-input-placeholder {font-family：Times New Roman，sans-serif！重要的;} 
 ::  -  moz-placeholder {font-family：Times New Roman，sans-serif！important; } / * firefox 19+ * / 
：-ms-input-placeholder {font-family：Times New Roman，sans-serif！important; } / * ie * / 
输入：-moz-placeholder {font-family：Times New Roman，sans-serif！important; } 

试试这段代码和 在这里演示

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

解决方案

Try to use !important.


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

//==================================

<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

这篇关于如何更改< input>的占位符的font-family？元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！