移动表单占位符的文本颜色不会改变
Posted
技术标签:
【中文标题】移动表单占位符的文本颜色不会改变【英文标题】：Mobile form placeholders' text color doesn't change 【发布时间】：2018-11-30 00:35:11 【问题描述】：我为我的网站创建了一个表单，它有桌面版和移动版。出于某种原因，它忽略了我的颜色属性，并且文本在移动设备上看起来是浅灰色而不是我选择的颜色。 这是 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
谢谢！
【问题讨论】：
【参考方案1】：由于你的代码有点乱，我不知道你在小屏幕上想要什么颜色，但你可以用这个来改变它
#wpcf7-f1224-p6-o2 ::placeholder
color: #001a71; /* <-- blue color */
然后像你到目前为止所做的那样把它包装起来
@media screen and (max-width: 768px)
#wpcf7-f1224-p6-o2 ::placeholder
color: #001a71;
Fiddle example here
【讨论】：
是的！谢谢，它奏效了。 :-) 代码很乱，因为我实际上使用了一个实时构建器，但我附上了 HTML 代码以尊重社区的规则。 :-)【参考方案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;
让我知道这是否适合你。
【讨论】：
以上是关于移动表单占位符的文本颜色不会改变的主要内容，如果未能解决你的问题，请参考以下文章