Form lost opacity in Firefox

Question

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

What is more in Chrome everything is great:

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;

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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">

Form lost opacity in Firefox

Sign up