Remove weird border from input text field

Problem

I am trying to remove a border from a input text field for my contact form.

Basically, everytime when I enter any data into the input text field (Name field) and then move on to the next field which is email, the input text field sort of has a border around it that might be invisible of some sort.

I tried my best to mess around with the CSS to make it work, but somehow its not working.

HTML

<section id="contact">
    <div class="container">
      <h3 class="contact-section-title">Need advice?</h3>
      <p class="contact-section-sub-title-form">Drop me an email below.</p
      <div class="grid-row col-2">
        <div class="grid-unit3">
          <form name="form1" method="post" action="contact.php" >
            <input name="cf_name" placeholder="What is your name? (Eg: John Doe)" type="text" required />
            <input name="cf_email" placeholder="What is your email? (Eg: johndoe@johndoe.com)" type="email" required />
            <textarea rows="4" cols="50" name="cf_message" placeholder="Please enter your message" class="message" required></textarea>
            <button class="submit" type="submit">Send email</button>
            <br><Br><br><Br>
          </form>
        </div><!--class="email" type="email"-->
      </div>
    </div>
  </section>

JSFiddle

Would appreciate some solid help on this. Don't know where to go from here.

Thank you.

Problem courtesy of: Jeiman

Solution

Changes I made ->

border:0px solid #58B9FA; 

line 105.

Solution courtesy of: coder

Discussion

Changed the border property in css from following

input {
            color: #3498db;
            display: block;
            font-family: Lato-Regular, sans-serif;
            font-size: 17px;
            margin-bottom: 0.8em;
            padding-bottom: 1em;
            padding-left: 1em;
            padding-right: 1em;
            padding-top: 1em;
            width: 100%;
            border:1px solid #58B9FA; }

to

input {
        color: #3498db;
        display: block;
        font-family: Lato-Regular, sans-serif;
        font-size: 17px;
        margin-bottom: 0.8em;
        padding-bottom: 1em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 1em;
        width: 100%;
        border:0px solid #58B9FA; }
Discussion courtesy of: Cnu Federer

The reason is because you add border:1px solid #58B9FA; to all input element. Fix it by replacing it with:

input {
    border: 0
} 

Updated Fiddle

Discussion courtesy of: Felix

set border: none; or border:0 in your input css

FIDDLE

Discussion courtesy of: Karuppiah

This recipe can be found in it's original form on Stack Over Flow.