Edenwave Edenwave - 4 months ago 22
CSS Question

Form lost opacity in Firefox

I have a problem with losing opacity of my form in Mozzilla:
Firefox

What is more in Chrome everything is great:
enter image description here

Do exist some tolls for set my CSS3 code to each browser? it would be great when it would add additional lines with -o- -moz- ect. prefixes.

My code is nothing special...

.input2
{
transition: all 300ms ease;
width: 240px;
height: 45px;
margin: 0 auto;
margin-top: 10px;
margin-left: 80px;
border-width: 0;
background-color: white;
border-bottom-width: 3px;
border-color: #CCCA14;
text-indent: 20px;
font-family: 'Titillium Web', sans-serif;
color: #232227;
font-size: 16px;
}

Answer

Try now it works, Border style was not defined and that's why it was not working Firefox.

You can either define it in one line or in multiple lines i.e. property of border as below,

.input2{
border-bottom : 2px solid #CCCA14;
} 

or 

.input2{
border-bottom-width : 2px;
border-color : #CCCA14;
border-style : solid;
} 

.input2
{
  transition: all 300ms ease;
  width: 240px;
  height: 45px;
  margin: 0 auto;
  margin-top: 10px;
  margin-left: 80px;
  border-width: 0;
  background-color: white;
  border-bottom: 3px solid #CCCA14;
  text-indent: 20px;
  font-family: 'Titillium Web', sans-serif;
  color: #232227;
  font-size: 16px;
  outline:none;
}
<input type="text" class="input2">