Apply our own CSS and avoid theme CSS

Hi, I want to create a form so my users can signup to my service, but the problem is that the theme always apply his CSS over my CSS.

So for example, the element INPUT have an attribute “block” but that give me problems.

I try to create the entire thing with the code block but it’s not working

This is the code of the form:

<div class="row white">
  <div class="container newsletter">
    Receba as novidades por email.
    <input type="text" placeholder=" (Email address hidden if logged out) ">
    <button class="button">
      <span>Receber</span>
    </button>
  </div>
</div>

<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 60px 0;
  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  font-size: 22px;
  background: #000;
  color: #FFF;
}

.row {
  padding: 30px;
}

.white {
  background: #FFF;
  color: #000;
}

.container {
  margin: 0 auto;
  max-width: 100%;
  width: 940px;
}

input {
  height: 50px;
  width: 300px;
  border: none;
  background: #EEE;
  margin-right: 20px;
  margin-left: 30px;
  -webkit-box-shadow: inset 0 4px 0 rgba(0,0,0,0.06);
  -moz-box-shadow: inset 0 4px 0 rgba(0,0,0,0.06);
  box-shadow: inset 0 4px 0 rgba(0,0,0,0.06);
  padding: 0 15px;
}

input:focus {
  background: #F3F3F3;
}

.button,
input{
  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
  font-size: 22px;
  color: #000;
  text-decoration: none;
  display: inline-block;
}

.button {
  height: 50px;
  background: #CDDB28;
  text-transform: uppercase;
  font-weight: 600;
  -webkit-box-shadow: 0 4px 0 #A3B021;
  -moz-box-shadow: 0 4px 0 #A3B021;
  box-shadow: 0 4px 0 #A3B021;
  padding: 0 50px;
  border: none;
  cursor: pointer;
  -webkit-transform: translateY(-4px);
  -moz-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  -o-transform: translateY(-4px);
  transform: translateY(-4px);
}

.button:hover {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.button:active {
  background: #A3B021;
  -webkit-box-shadow: inset 0 4px 0 #8D931D;
  -moz-box-shadow: inset 0 4px 0 #8D931D;
  box-shadow: inset 0 4px 0 #8D931D;
}

.button span {
  display: block;
}

.button:active span {
  -webkit-transform: translateY(4px);
  -moz-transform: translateY(4px);
  -ms-transform: translateY(4px);
  -o-transform: translateY(4px);
  transform: translateY(4px);
}

textarea, input { outline: none; }
</style>

<script>
$('.button').click(function() {
  var rowHeight = $('.row').height();
  $('.newsletter').fadeOut(500, function() {
    $('.row').height(rowHeight);
    $(this).html('<strong>Quase lá!</strong> <br />Verifique sua caixa de email para confirmar a assinatura.');
    $(this).fadeIn(500);
  });
})
</script>