用于 chrome 占位符的字体的 css 技巧
Posted
技术标签:
【中文标题】用于 chrome 占位符的字体的 css 技巧【英文标题】：css tricks for font awesome in placeholder for chrome 【发布时间】：2015-08-31 10:43:54 【问题描述】：谁能告诉我为什么我的字体 awesome 不能在 chrome 中正常工作，虽然它在 firefox 上工作正常？但是如果我删除了 awesome 字体，它就会再次正常。click here to see the image
这是我的表单的 html 代码：
<!DOCTYPE html>
<html>
<head>
<title>Student-login</title>
<link href='http://fonts.googleapis.com/css?family=Shadows+Into+Light' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<div class="body"></div>
<div class="main-form">
<h1>Student Registration</h1>
<form class="login" name="register" action="database.php" method="post">
<input type="text" placeholder=" User name(*)" name="username"></input><br>
<input type="password" placeholder=" Password(*)" name="password"></input><br>
<input type="text" placeholder=" First name(*)" name="first_name"></input><br>
<input type="text" placeholder=" Last name(*)" name="last_name"></input><br>
<select name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select><br>
<input type="text" placeholder=" E-mail(*)" name="email"></input><br>
<input type="text" placeholder=" Phone number(*)" name="phone"></input><br>
<div class="button"><a href="login.html">Login <i class="fa fa-arrow-circle-right"></i></a></div>
<input type="submit" value="Submit" name="btnsubmit"></input>
</form>
</div>
</body>
</html>
这是css：
.body
position: absolute;
top:0px;
left: -10px;
right: 0px;
bottom: 0px;
width: auto;
height: auto;
background-image: url("background.jpg");
background-size: cover;
-webkit-filter: blur(5px);
filter:blur(5px);
z-index: 0;
h1
font-family: 'Shadows Into Light', cursive;
color: #282828;
text-align: center;
margin: 2%;
.main-form
float: right;
margin-top: 3%;
height:auto;
border-radius: 3px;
background:#F0F0F0;
opacity: .6;
padding-top: 1%;
padding-left: 4%;
padding-right: 4%;
padding-bottom: 1%;
position: relative;
z-index: 1;
.login input[type="text"]
width: 260px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
font-family:FontAwesome;
.login input[type="text"]:focus
border: 1px solid #0033FF;
.login input[type="password"]
width: 260px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
font-family:FontAwesome;
.login input[type="password"]:focus
border: 1px solid #0033FF;
.login input[type="button"]
width: 265px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
font-family: 'Shadows Into Light', cursive;
font-size: 100%;
font-weight: bold;
.login input[type="button"]:hover
background-color: #404040;
color: white;
.login input[type="submit"]
width: 265px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
font-family: 'Shadows Into Light', cursive;
font-size: 100%;
font-weight: bold;
.login input[type="submit"]:hover
background-color: #404040;
color: white;
.button
width: 270px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
font-family: 'Shadows Into Light', cursive;
font-size: 100%;
font-weight: bold;
text-decoration: none;
color:black;
text-align: center;
.button a
font-family: 'Shadows Into Light', cursive;
font-size: 100%;
font-weight: bold;
text-decoration: none;
color:black;
text-align: center;
.button:hover
background-color: #404040;
.button:hover a
color: white;
.login select
width: 265px;
height: 35px;
border-radius: 2px;
border: 1px solid #505050 ;
background: transparent;
margin: 2%;
font-family: 'Shadows Into Light', cursive;
font-size: 100%;
font-weight: bold;
.login select:hover
background-color: #404040;
color: white;
::-webkit-input-placeholder
color: red;
opacity: .8 !important;
:-moz-placeholder /* Firefox 18- */
color: red;
opacity: .8 !important;
::-moz-placeholder /* Firefox 19+ */
color: red;
opacity: .8 !important;
:-ms-input-placeholder
color: red;
opacity: .8 !important;
【问题讨论】：
Chrome 是否支持placeholder 中的 HTML 实体？感觉不应该。
可能相关 - ***.com/questions/19350291/…
所以它不支持占位符中的html实体？error link@Paulie_D
我并不是说它不...只是感觉它不应该。
我已经从 *** 中阅读了一些答案，他们说它在 chrome、safari 和 firefox 上都可以正常工作，但在 IE 上有一些问题，但在我的情况下，它适用于 firefox 而不是 chrome。你检查过吗我发布的截图？@Paulie_D
【参考方案1】：
感谢@JDTLH9 为我提供了问题的线索。实际上您不必使用内联样式，但在以前的设计中我使用的是
font-family:fontawesome;
但是当我把它转换成这个时：
font-family:Arial,fontawesome
它在 chrome 中对我有用。
【讨论】：
很高兴这有帮助！是的，你是对的，改变样式表也可以解决这个问题。只是需要添加 Arial 字体 :)【参考方案2】：请尝试为您要使用的字体添加内联样式。示例：
<input type="text" placeholder=" User name(*)" name="username" style="font-family:Arial, FontAwesome"></input>
关于这种方法的更多信息来自一个询问类似问题here的线程
【讨论】：
以上是关于用于 chrome 占位符的字体的 css 技巧的主要内容，如果未能解决你的问题，请参考以下文章
当输入和占位符具有不同的字体大小时，输入的占位符在 Chrome 中未对齐