我已经为我的网站创建了一个表单，它具有桌面版本和移动版本。由于某种原因，它会忽略我的颜色属性，并且文本在移动设备上看起来是浅灰色，而不是我选择的颜色。 这是HTML：
<div role="form" class="wpcf7" id="wpcf7-f1224-p6-o2" lang="en-US" dir="ltr">
<div class="screen-reader-response"></div>
<form action="/?preview_nonce=b596cad62f#wpcf7-f1224-p6-o2" method="post" class="wpcf7-form cf7-style" novalidate="novalidate">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="1224">
<input type="hidden" name="_wpcf7_version" value="5.0.2">
<input type="hidden" name="_wpcf7_locale" value="en_US">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f1224-p6-o2">
<input type="hidden" name="_wpcf7_container_post" value="6">
</div>
<p><label> <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder=":שם*"></span> </label></p>
<p><label> <span class="wpcf7-form-control-wrap company-name"><input type="text" name="company-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder=":שם חברה"></span> </label></p>
<p><label> <span class="wpcf7-form-control-wrap tel-888"><input type="tel" name="tel-888" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-required wpcf7-validates-as-tel tel-888" id="tel-888" aria-required="true" aria-invalid="false" placeholder=":טלפון*"></span> </label></p>
<p><label> <span class="wpcf7-form-control-wrap email-777"><input type="email" name="email-777" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email email-777" id="email-777" aria-invalid="false" placeholder=":אימייל"></span></label></p>
<p><label><span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" id="textarea-20" aria-required="true" aria-invalid="false" placeholder=":הודעה"></textarea></span> </label></p>
<div align="left"><label> <input type="submit" value="שלח" class="wpcf7-form-control wpcf7-submit button-20" id="button-20"><span class="ajax-loader"></span></label></div>
<div class="wpcf7-response-output wpcf7-display-none"></div></form></div>
这是CSS：
/* webkit solution */
input[type='text'] { text-align:right;
}
/* mozilla solution */
input:-moz-placeholder { text-align:right; }
input[type='text'], input[type='tel'], input[type="email"]{
text-align:right;
font-family: heebo;
color: #001a71 !important;
background-color: #ffffff !important;border: 1px solid #001a71 !important;
font-size: 1.563em !important;
height: 20px;
margin-bottom: -30px !important;
margin-top: -28px !important;
position: static !important
min-width: 190px;
}
@media screen and (min-width: 415px) {
textarea {
height: 190px;
text-align:right;
font-family: heebo;
color: #001a71 !important;
background-color: #ffffff !important;border: 1px solid #001a71 !important;
font-size: 1.563em !important;
margin-top: -4px
!important;
margin: 0 -10px;
position: static !important
min-width: 190px;
}
#button-22 {
text-transform: uppercase;
background: #4a5ba8;
color: white;
border: 1px solid #4a5ba8;
font-family: 'Heebo', sans-serif;
font-size: 1.5em;
font-weight: 300;
transition: all 0.5s ease 0s;
padding: 10px;
margin:0 -103%;
position: relative;
min-width:43.446 px
max-width: 43.446px ;!important
}
.contact-form-wrapper input[type=”submit”]
float: left !important;
}
#button-22:hover {
text-transform: uppercase;
background-color: transparent;
color: #4a5ba8;
border: 1px solid #4a5ba8;
font-family: 'Heebo', sans-serif;
font-size: 1.5em;
font-weight: 300;
transition: all 0.5s ease 0s;
padding: 10px;
position: relative
min-width:43.446 px
max-width: 43.446px
float: !important;
}
@media screen and (min-width: 416px) {
span.wpcf7-not-valid-tip {
visibility: hidden
}
.cf7-style div.wpcf7-validation-errors {
color: white !important;
background-color: #001a71 !IMPORTANT;
border: none !important;
min-width: 200px;
font-family: Heebo;
margin-top: -30px;
margin-top: -30px;
}
body .cf7-style div.wpcf7-response-output
{
padding: 0 0 0 0 !important;
}
.wpcf7-response-output
{
margin: 0;
padding: -1pX -1PX -1PX;
HEIGHT: 28PX;
TEXT-ALIGN: CENTER;
font-family: Heebo;
font-size: 1.3em;
min-width: 180px;
margin-top: -30px;
}
body .cf7-style input[type=”text”]:focus,
body .cf7-style input[type=”email”]:focus,
body .cf7-style textarea:focus {
min-width: 180px;
color: #001a71;
font-size: 1.3em;
}
[placeholder]::-webkit-input-placeholder {
color: #001a71 !important;
display: inline-block;
left: auto;
color: #001a71 !important;
min-width: 164px;
}
[placeholder]:focus {
transition: opacity 0.5s 0.5s ease !important;
min-width: 164px;
}
[placeholder]:focus::-webkit-input-placeholder {
transition: opacity 0.5s 0.5s ease;
opacity: 0;
color: #001a71 !important;
}}
任何人都可以告诉我，为什么占位符内的文本在移动显示器上显示为浅灰色？您也可以在此网站的底部看到表格：www.mayabarber.co.il
谢谢！
答案 0 :(得分：2)
尝试设置类似的内容，请查看此link以获取更多信息。
#wpcf7-f1224-p6-o2 ::placeholder {
color: red;
opacity: 1; /* Firefox */
}
#wpcf7-f1224-p6-o2 :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
#wpcf7-f1224-p6-o2 ::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
让我知道这是否对您有用。
答案 1 :(得分：2)
由于您的代码有些混乱，因此我不知道您希望在较小的屏幕上使用哪种颜色，但是您可以使用此颜色进行更改
#wpcf7-f1224-p6-o2 ::placeholder {
color: #001a71; /* <-- blue color */
}
然后像到目前为止一样包装它
@media screen and (max-width: 768px) {
#wpcf7-f1224-p6-o2 ::placeholder {
color: #001a71;
}
}