2014-01-24 4 views
-1

Я пытаюсь удалить границу из текстового поля ввода для моей контактной формы.Удалить странную границу из текстового поля ввода

В принципе, каждый раз, когда я ввожу какие-либо данные во входное текстовое поле (поле «Имя»), а затем перехожу к следующему полю, которое является адресом электронной почты, поле ввода имеет вид границы, который может быть невидимым для некоторых Сортировать.

Я старался изо всех сил возиться с CSS, чтобы он работал, но как-то его не работает.

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: [email protected])" 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

Оценил некоторые твердые помощь по этому вопросу. Не знаю, куда идти отсюда.

спасибо.

+2

Вы обходили автоматическую проверку кода, Разметка произвольное слово как код. Не делай этого. Ваш вопрос должен идти в вопросе. – meagar

+0

В прошлый раз, когда я установил ссылку в код, пользователи не могли на нее нажимать. Приношу извинения за это, поскольку я не уверен, как это исправить. – Jeiman

+2

Вам нужно поставить ** код ** в ** вопрос **. Я не говорю о ссылке. Вам нужно поставить фактический * исходный код * в вопрос и отступ *, который *. Вы не можете размещать ссылки JSFiddle здесь, не отправляя код. – meagar

ответ

2

изменения я сделал ->

border:0px solid #58B9FA; 

линия 105.

+0

Вы можете просто удалить эту строку, так как теперь она ничего не делает. –

1

Изменено свойство границы в CSS из следующих

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; } 

в

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; } 
2

Причина в том, что вы добавляете border:1px solid #58B9FA; всем input элемент. Зафиксируйте его, заменив его:

input { 
    border: 0 
} 

Updated Fiddle

+0

@OP: также .... добавить 'outline: 0;' или 'outline: none;' .... или вы услышите из старых версий IE !! :) – NoobEditor

Смежные вопросы