想请问一下为什么我一直不能设置到placeholder里面的文字的颜色

想问一下为什么不能设置到placeholder里面的颜色，是浏览器兼容性问题么还是什么问题，用的是火狐新版本。

如果想实现图片中的效果应该怎么做么

附上所有代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div>
 <!--头部的html-->
 <div class="header">
        <img src="images/logo.png" alt="">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">GALLERY</a></li>
            <li><a href="#">FACULTY</a></li>
            <li><a href="#">EVENTS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </div>
 <!--中间的html-->
 <div class="middle">
 <!--中间的顶部标签-->
 <div class="top">
            <div class="top-images">
            <img src="images/banner3.jpg">
            </div>
            <form action="">
                <input type="text" name=""  placeholder="your Name">
                <input type="text" name=""  placeholder="your Phone">
                <input type="text" name=""  placeholder="your Email">
                <input type="text" name=""  placeholder="Write Your Comment Here" >
                <textarea placeholder="Write Your Comment Here">
                </textarea>
                <input type="submit"  class="submit1" value="SEND MESSAGE">
            </form>
        </div>
 <!--中间的ABOUT区-->
 <div class="middle-mid">
            <div class="middle-mid-font">
            <h1>ABOUT</h1>
            <hr>
            <P>Lorem Ipsum is simple dummy text of the pronting and typesetting industry .Lorem has been the industry's standard dummy text exer since the 1500s.</P>
            </div>
            <div class="middle-mid-img">
                <div class="middle-mid-img-left">
                    <p>A WORD ABOUT US</p>
                </div><!--设置左边的效果</div>-->
 <img src="images/bb3.jpg">  <!--中间图片-->
 <div class="middle-mid-img-right"> <!--设置右边的效果-->
 <div class="middle-mid-img-right-top">
                        <p>70000</p>
                        <hr>
                        <p>Students</p>
                    </div>
                    <div class="middle-mid-img-right-bottom">
                        <p>600</p>
                        <hr>
                        <p>Faculty</p>
                    </div>
                </div>
                <div class="middle-mid-img-position">
                    <p>Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nislet felis gravida commodo?Suspendisseeget ullamcorper ipsum.Suspendissediam amet.</p>
                    <input type="submit" value="EXPLORE" name="explore">
                </div>
            </div>
        <div class="bottom">
 
        </div>
    </div>
 <!--页脚-->
 <div class="footer">
 
    </div>
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

/*整体的样式*/
*{
    padding: 0;
    margin: 0;
    list-style-type: none;
    text-decoration: none;
    font-family:"Microsoft YaHei UI";
}
 
/*头部样式*/
 .header{
    width: 100%;
    height: 80px;
    background-color: #07cbc9;
    font-size: 18px;
    line-height: 80px;
    color: #fff;
    font-weight: bolder;
}
 .header img{
    padding-left: 150px;
    padding-top: 16px;
}
.header ul{
    float: right;
    margin-right: 110px;
}
 .header ul li{
    float: left;
    margin: 0 10px;
}
 .header ul li a{
    color: #fff;
}
 .header ul li:hover{
    background-color: #333;
}
/*以下是中间部位的标签*/
/*以下是中间部位顶部的css*/
.top{ position: relative;}
.top .top-images img{
    width: 100%;
    height: 600px;
    display: block;
}
.top form{
    width: 510px;
    height: 380px;
    position: absolute;
    top:50%;
    left: 50%;
    margin-left: -255px;
    margin-top: -180px;
    text-align: center;
 
}
.top form input{
    display: block;
    height: 40px;
    width: 505px;
    background-color: rgba(0,0,0,0);
    border: 2px solid #808080;
    color: #808080;
    margin-bottom: 20px;
}
.top form input::-webkit-input-placeholder{ color: #808080;}
.top form textarea{
    width: 505px;
    height: 120px;
    background-color: rgba(0,0,0,0);
    border: 2px solid #808080;
    color: #808080;
}
.top form .submit1{width: 120px;height: 40px;margin: 0 auto;}
/*以下是中间部位中部的css*/
.middle .middle-mid{
    width: 100%;
    margin: 0  auto;
}
.middle .middle-mid .middle-mid-font{
    width: 480px;
    margin: 0 auto;
    text-align: center;
}
.middle .middle-mid .middle-mid-font hr{  margin: 0 auto; width:40px;size:2px; color:#07cbc9;}
.middle .middle-mid .middle-mid-font p{ color: #797979; padding-top: 20px; padding-bottom: 32px;}
.middle .middle-mid .middle-mid-font h1{ font-size:40px;height: 40px;line-height: 40px;padding-top: 70px;padding-bottom: 24px }
/*以下是img区域的样式*/
.middle .middle-mid .middle-mid-img{
    height: 380px;
    width: 1200px;
    position: relative;
    overflow:visible ;
    margin: 0 auto;
}
.middle-mid-img-left{
    width: 180px;
    height: 75px;
    float: left;
    font-size: 30px;
    text-align: center;
    margin-right: 40px;
    margin-left: 90px;
}
.middle .middle-mid .middle-mid-img img{
    float: left;
    display: block;
    height: 100%;
    width: 570px;
}
.middle .middle-mid .middle-mid-img .middle-mid-img-right{
    float: left;
    margin: 35px;
}
.middle .middle-mid .middle-mid-img .middle-mid-img-right .middle-mid-img-right-top,
.middle .middle-mid .middle-mid-img .middle-mid-img-right .middle-mid-img-right-bottom{
    border: solid 1px #07cbc9;
    width: 238px;
    height: 143px;
    text-align: center;
}
.middle-mid-img-right-top hr,.middle-mid-img-right-bottom hr{
    width: 40px;color: #07cbc9;margin: 0 auto;
}
.middle-mid-img-right-top p,.middle-mid-img-right-bottom p{
    width: 100%;
    height: 70px;
    line-height: 70px;
}
.middle-mid-img-right-top p:nth-child(1),.middle-mid-img-right-bottom p:nth-child(1){
    font-size: 25px;
    font-weight: 600;
}
.middle-mid-img-right-bottom{ margin-top: 30px;}
.middle-mid-img-position{
    width:370px ;
    height: 250px;
    position: absolute;
    top:100px;
    left: 70px;
    border:1px solid #c5c5c5 ;
    background-color: rgba(255,255,255,0.4);
}
.middle-mid-img-position p{
    padding:30px 30px 25px 25px;
    font-size: 17px;
}
.middle-mid-img-position input{
    width: 105px;
    height: 45px;
    line-height: 45px;
    font-size: 15px;
    text-align: center;
    margin-left: 25px;
    color: #fff;
    background-color:#000;
    border: none;
}
.middle-mid-img-position input:hover{
    border: 1px solid #000;
    color: #000;
    background-color: #fff;
 
}

慕函数12138 2018-10-17

源自：项目：网页布局案例 2-10 作业题

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2018-10-17 10:42:57

placeholder中的文字颜色需要针对不同浏览器设置兼容 ,如下在火狐;浏览器下设置颜色 :

火狐显示如下:

如上方式作为了解 , placeholder文字颜色针对不同浏览器需要不同的设置 ,所以实际开发中 , 一般不会去设置它的颜色 , 使用默认的就可以了哦

祝学习愉快 ,望采纳

收起回答

慕函数12138 提问者 #1

就是如果以后要保证颜色设置的兼容性的话，这三条属性都要同时存在的是么，互不影响的吧。

2018-10-17 10:53:39
好帮手慕夭夭回复提问者慕函数12138 #2

同学可以看一下老师在截图中的备注哦 . 就是针对不同浏览器版本都有自己的设置 , 老师只是举例了其中的版本而已 , 如第三条是给IE浏览器设置的兼容 ,如果实际中不需要给IE做兼容 , 就不需要设置了 . 这些是不会互相影响的

2018-10-17 11:00:59
慕函数12138 提问者回复好帮手慕夭夭 #3

好的呢，谢谢老师

2018-10-17 11:16:12