移动表单占位符的文本颜色不变
移动表单占位符的文本颜色不变
提问于 2018-06-21 03:24:05
我已经为我的网站创建了一个表单，它有一个桌面版本和一个移动版本。由于某些原因，它忽略了我的颜色属性，并且文本在移动设备上看起来是浅灰色，而不是我选择的颜色。下面是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
谢谢!
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-21 03:40:15
由于您的代码有点凌乱，我不知道您希望在较小的屏幕上使用什么颜色，但您可以使用以下命令更改它
#wpcf7-f1224-p6-o2 ::placeholder {
color: #001a71; /* <-- blue color */
}然后像你到目前为止所做的那样把它包装起来
@media screen and (max-width: 768px) {
#wpcf7-f1224-p6-o2 ::placeholder {
color: #001a71;
}
}Stack Overflow用户
发布于 2018-06-21 03:33:53
尝试这样设置，查看此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;
}让我知道这对你是否有效。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50955628
复制相关文章
相似问题