Help with placeholder that does not change color

Question

Help with placeholder that does not change color

Navigation

#1 by (1 votes)

1

People, I really need your help.

I'm developing a website. I'm studying more accurately html5 and css3, and I'm getting a problem I can not solve ...

Here is the format of the site in CodePen: link

And if you want to download on your computer to see Google Drive, I think it would be great to download them, because even codepen is not the right way: link

My problem is this:

I can not make the placeholder go white in firefox: The site below, but in codepen and download ... As you can see below the placeholder is gray, but if you download the file and run in google chrome, in internet explorer, microsoft edge, placeholder will work right .. .

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

Could anyone 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>

css input firefox busca placeholder

asked by anonymous 07.06.2017 / 08:05

1 answer

Base64.decode specific Data overlapping the x-axis of the graph

score 1 · Accepted Answer

You need to change the opacity. And the general case is also missing without prefixes.

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

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