用于 chrome 占位符的字体的 css 技巧答案

【问题标题】：css tricks for font awesome in placeholder for chrome用于 chrome 占位符的字体的 css 技巧
【发布时间】：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="&#xf007; User name(*)" name="username"></input><br>
                <input type="password" placeholder="&#xf023; Password(*)" name="password"></input><br>
                <input type="text" placeholder="&#xf040; First name(*)" name="first_name"></input><br>
                <input type="text" placeholder="&#xf040; 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="&#xf0e0;  E-mail(*)" name="email"></input><br>
                <input type="text" placeholder="&#xf095; 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 实体？感觉不应该。
可能相关 - stackoverflow.com/questions/19350291/…
所以它不支持占位符中的html实体？error link@Paulie_D
我并不是说它不...只是感觉它不应该。
我已经从 stackoverflow 中阅读了一些答案，他们说它在 chrome、safari 和 firefox 上都可以正常工作，但在 IE 上有一些问题，但在我的情况下，它适用于 firefox 而不是 chrome。你检查过吗我发布的截图？@Paulie_D

标签： html css google-chrome placeholder

【解决方案1】：

感谢@JDTLH9 为我提供了问题的线索。实际上您不必使用内联样式，但在以前的设计中我使用的是

{font-family:fontawesome};

但是当我把它转换成这个时：

{font-family:Arial,fontawesome}

它在 chrome 中对我有用。

【讨论】：

很高兴这有帮助！是的，你是对的，改变样式表也可以解决这个问题。只是需要添加 Arial 字体 :)

【解决方案2】：

请尝试为您要使用的字体添加内联样式。示例：

<input type="text" placeholder="&#xf007; User name(*)" name="username" style="font-family:Arial, FontAwesome"></input>

关于这种方法的更多信息来自一个询问类似问题here的线程

【讨论】：