想请问一下为什么我一直不能设置到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>
/*整体的样式*/
*{
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;
}1
收起
正在回答
2回答
placeholder中的文字颜色需要针对不同浏览器设置兼容 ,如下在火狐;浏览器下设置颜色 :
火狐显示如下:
如上方式作为了解 , placeholder文字颜色针对不同浏览器需要不同的设置 ,所以实际开发中 , 一般不会去设置它的颜色 , 使用默认的就可以了哦
祝学习愉快 ,望采纳
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星