Help with placeholder that does not change color

Question

Guys I really need your help.

I am developing a website. So studying more precisely Html5 and css3 and I have a huge problem that I cannot solve...

Here the format of the site in Codepen: https://codepen.io/sandsoncosta/pen/XRLvvW

And if you want to download on the computer to see, Google Drive, I think it would be very good to download, because even in the codepen is not in the right way: https://drive.google.com/file/d/0B28SaVWuwZ5kSlZURWlWRlljdjg/view

My problem is this:

I can’t make the placeholder turn white in firefox: The site below, but it’s on codepen and for download... As you can see below the placeholder is gray, but if you download the file and run it on google Chrome, internet explorer, microsoft edge, the placeholder will work fine...

Already in firefox it does not turn white... If I put for example, blue, it turns blue, but I get half transparent... In other browsers, it turns blue normal, very strong, very alive.

Could someone help me with this?

/*@import url('https://fonts.googleapis.com/css?family=Open+Sans');*/
@font-face {
	font-family: "Chicle-Regular";
	src: url(../fonts/Chicle-Regular.ttf);
	font-size: 1em;
}

header {
	width: 100%;
	height: 150px;
	background-color: rgba(94, 41, 146, 0.9);
	z-index: 2;
	position: relative;
	
}
header .container {
	position: relative;
}
header .header-black {
	background-color: #000;
	height: 40px;
	
}
header .header-black li {
	background-image: url(https://image.prntscr.com/image/7924bdab73cc417cbcee7f8f104f8c55.png);
	background-repeat: no-repeat;
	display: inline-block;
	margin: 4px;
}
header .header-black li.clube01 {
	background-position: 0 0;
}
header .header-black li.clube02 {
	background-position: -48px 0;
}
header .header-black li.clube03 {
	background-position: -96px 0;
}
header .header-black li.clube04 {
	background-position: -140px 0;
}
header .header-black li.clube05 {
	background-position: -192px 0;
}
header .header-black li.clube06 {
	background-position: -240px 0;
}
header .header-black li.clube07 {
	background-position: -288px 0;
}
header .header-black li.clube08 {
	background-position: -336px 0;
}
header .header-black li.clube09 {
	background-position: -381px 0;
}
header .header-black li.clube10 {
	background-position: -429px 0;
}
header .header-black li.clube11 {
	background-position: -480px 0;
}
header .header-black li.clube12 {
	background-position: -528px 0;
}
header .header-black li.clube13 {
	background-position: -576px 0;
}
header .header-black li.clube14 {
	background-position: -627px 0;
}
header .header-black li.clube15 {
	background-position: -672px 0;
}
header .header-black li.clube16 {
	background-position: -720px 0;
}
header .header-black li.clube17 {
	background-position: -764px 0;
}
header .header-black li.clube18 {
	background-position: -807px 0;
}
header .header-black li.clube19 {
	background-position: -856px 0;
}
header .header-black li.clube20 {
	background-position: -903px 0;
}
header .header-black li.clube21 {
	background-position: -948px 0;
}
header .header-black li.clube22 {
	background-position: -994px 0;
}
header .header-black li a {
	width: 32px;
	height: 32px;
	display: block;
}
header #logo {
	position: absolute;
	top: 20px;
}
#menu {
	margin: 12px 0;
}
#menu li {
	display: inline-block;
	font-family: "Chicle-Regular";
}
#menu li.search {
	width: 182px;
}
#menu li.search input {
	background-color: #5c2d90;
	color: #fff;
	border: none;
	height: 30px;
	line-height: 30px;
  padding: 10px;
}
*ESSA PARTE É PARA MUDAR A COR*/

/* PARA CHROME, SAFARI, ANDROID E IOS */
#menu li.search ::-webkit-input-placeholder {
	color: #fff;
}
/*PARA INTERNET EXPLORER */
#menu li.search :-ms-input-placeholder {
	color: #fff;
}
/*PARA MICROSOF EDGE */
#menu li.search ::-ms-input-placeholder {
	color: #fff;
}
/*PARA FIREFOX 18- */
#menu li.search input:-moz-placeholder {
	color: #fff;
}
/*PARA FIREFOX 19+ */
#menu li.search input::-moz-placeholder {
	color: #fff;
}
/*  PARA OPERA */
#menu li.search ::-o-input-placeholder {
	color: #fff;
}
#menu li.search button {
	background: none;
	border: none;
	position: absolute;
	right: 3px;
	top: 7px;

}
#menu li.search button i {	
	font-size: 14px;
	color: rgba(255, 255, 255, .5);
}
#menu li a {
	color: #fff;
	font-size: 16px;
	padding: 16px 25px;
}
#menu li.search .input-group {
	top: 8px;
}
#banner {
	width: 100%;
	height: 728px;
	position: relative;
	background: url(https://image.prntscr.com/image/45b6cf6518934924bba52db479c19c1b.jpg) no-repeat;
	background-size: cover;
	top: -110px;
	background-position: 0 -110px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


</head>

<body>

<header>

	<div class="container">	
		<img id="logo" src="https://image.prntscr.com/image/d7dbe9661b2447a2abe06197f64640e1.png" alt="logo">
	</div>

<div class="header-black">
	<div class="container">
<ul class="pull-right">
	<li class="clube01"><a href="#"></a></li>
	<li class="clube02"><a href="#"></a></li>
	<li class="clube03"><a href="#"></a></li>
	<li class="clube04"><a href="#"></a></li>
	<li class="clube05"><a href="#"></a></li>
	<li class="clube06"><a href="#"></a></li>
	<li class="clube07"><a href="#"></a></li>
	<li class="clube08"><a href="#"></a></li>
	<li class="clube09"><a href="#"></a></li>
	<li class="clube10"><a href="#"></a></li>
	<li class="clube11"><a href="#"></a></li>
	<li class="clube12"><a href="#"></a></li>
	<li class="clube13"><a href="#"></a></li>
	<li class="clube14"><a href="#"></a></li>
	<li class="clube15"><a href="#"></a></li>
	<li class="clube16"><a href="#"></a></li>
	<li class="clube17"><a href="#"></a></li>
	<li class="clube18"><a href="#"></a></li>
	<li class="clube19"><a href="#"></a></li>
	<li class="clube20"><a href="#"></a></li>
	<li class="clube21"><a href="#"></a></li>
	<li class="clube22"><a href="#"></a></li>
</ul>
	</div>
</div>
	
<div class="container">
	<div class="row">
		<nav id="menu" class="pull-right">
			<ul>
				<li><a href="#">Tickets</a></li>
				<li><a href="#">News</a></li>
				<li><a href="#">Schedule</a></li>
				<li class="search">
					<div class="input-group">
						<input type="search" placeholder="Procurar...">
							<span class="input-group-btn">
								<button type="button"><i class="fa fa-search"></i>
								</button>
							</span>
					</div>
				</li>
			</ul>
		</nav>
	</div>
</div>

</header>

<section>
	<div id="banner">Estou bem aqui hahahaha</div>
</section>

<script src="1.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

it is necessary to change the opacity. And also missing the general case without prefixes.

#menu li.search::input-placeholder {
  color: #fff;
}

#menu li.search input::-moz-placeholder {
  color: #fff;
  opacity: 1;
}