Подчеркнутый вопрос с формой

Проблема, с которой я сталкиваюсь, пытается получить красную подсветку под всеми моими входами. Сейчас он делает только половину из них, хотя они все входы. Похоже, что он только подчеркивает мой первый раздел ... Может ли кто-нибудь понять, почему мой первый раздел является единственным с подчеркиваниями, а раздел раздела не является? Спасибо за помощь!Подчеркнутый вопрос с формой

вот jsfiddle, чтобы увидеть его: https://jsfiddle.net/acr3jw29/

HTML:

<body> 

<h1>Contact</h1> 

<form action="" methods="GET" enctype="multipart/form-data" autocomplete="on" class="contact"> 
<section class="clearfix"> 
<fieldset><legend><i class="fa fa-user" aria-hidden="true"></i>

Персональная информация

<label><span>First Name</span> <input name="first_name" type="text" value="" placeholder="First Name Here" autofocus required/> 
</label> 
<label><span>Last Name</span><input name="last_name" type="text" value="" placeholder="Last Name Here" autofocus required/> 
</label> 
<label><span>Date of Birth</span> <input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/> 
</label> 


<label><span>Level of Education</span> <input name="level_of_education" type="" value="" placeholder="" autofocus required/></label> 
<select name="education_level"> 
<option value="High School">High School</option> 
<option value="Undergraduate">Undergradute</option> 
<option value="Graduate">Graduate</option> 
</select> 





<label><span>Number of years until next degree is completed </span>  
<input type="number" name="quantity" min="1" max="6" autofocus></label> 

</fieldset> 




<fieldset><legend><i class="fa fa-envelope-o" aria-hidden="true"></i>

Контактная информация

<label><span>Email</span><input class="ghost-input" name="email" value="" type="email" placeholder="[email protected]" autocomplete="off" /></label> 

<label><span>Phone Number</span><input name="phonenumber" value="" type="tel" placeholder="743-558-2196" /></label> 

<label><span>Website</span><input name="website" value="" type="url" placeholder="https://yoururl.com"/></label> 



</fieldset> 




</section> 




<section class="clearfix column" > 


<fieldset><legend><i class="fa fa-laptop" aria-hidden="true"></i>

Каковы ваши интересы

<label><span>Web Design</span><input name="webdesign" value="web_design" type="checkbox"/></label> 

<label><span>Web Development</span><input name="webdevelopment" value="web_development" type="checkbox" /></label> 

<label><span>Computer Science</span><input name="computerscience" value="computer_science" type="checkbox" /></label> 




<label><span>Graphic Design</span><input name="graphicdesign" value="graphic_design" type="checkbox" /></label> 

<label><span>User Experience</span><input name="userexperience" value="user_experience" type="checkbox" /></label> 

<label><span>App Development</span><input name="appdevelopment" value="app_development" type="checkbox" /></label> 


</fieldset> 



<fieldset><legend><i class="fa fa-volume-control-phone" aria-hidden="true"> 

</i> 

Continuation</legend> 



<legend>You can contact me by:</legend> 
<br> 
<label><span>Contact me by phone</span><input name="contact_me" type="radio" value="phone" checked/></label> 
<label><span>Contact me by email</span><input name="contact_me" type="radio" value="email"/></label> 
<label><span>Contact me by text</span><input name="contact_me" type="radio" value="text"/></label> 
<br> 


<legend>I'm interested in:</legend> 
<br> 

<label><span>Undergraduate</span><input name="interest" type="radio" value="text"/></label> 
<label><span>Graduate</span><input name="interest" type="radio" value="text"/></label> 
<label><span>Online</span><input name="interest" type="radio" value="text"/></label> 

</fieldset> 



</section> 






</form> 
<br> 
<input name="submit_to_programmer" type="submit" value="Submit"/> 


<script src="https://use.fontawesome.com/8f5d316ef9.js"></script> 

</body>

источник

2016-10-16 Cakers

ой странно .. Я буду смотреть на это спасибо – Cakers

же вопроса здесь с Firefox 45.3.0..no границы применения для флажка и радио – repzero

Также на Chromium Version 52.0.2743.116 Построен на 8.5, работает на Debian Kali Linux 2.0 (64-разрядная версия) – repzero

Для корректного отображения во всех браузере, быстрое решение было бы поместить весь входной контейнер CheckBox и радио типа внутри диапазона. Я заметил, что вы установили display:block; для всех элементов span в ваших кодах. Поэтому я вставил класс для каждого контейнера span, который будет содержать поля ввода и стиль с отображением встроенного блока.

см ниже фрагмент кода

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
form.contact label { 
 
    display: block; 
 
} 
 

 
span { 
 
    display: block; 
 
    border: none; 
 
} 
 

 
.clearfix:after { 
 
    content: " "; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
section { 
 
    width: 90%; 
 
} 
 

 
fieldset { 
 
    width: 45%; 
 
    float: left; 
 
    border: none; 
 
} 
 

 
input { 
 
    border: none; 
 
    border-bottom: 2px solid red; 
 
    margin: 3px; 
 
} 
 
.in_container{ 
 
    display:inline-block; 
 
    border-bottom:solid red; 
 
}

<body> 
 

 
    <h1>Contact</h1> 
 

 
    <form action="" methods="GET" enctype="multipart/form-data" autocomplete="on" class="contact"> 
 
    <section class="clearfix"> 
 
     <fieldset> 
 
     <legend><i class="fa fa-user" aria-hidden="true"></i> Personal Information</legend> 
 

 
     <label><span>First Name</span> 
 
      <input name="first_name" type="text" value="" placeholder="First Name Here" autofocus required/> 
 
     </label> 
 
     <label><span>Last Name</span> 
 
      <input name="last_name" type="text" value="" placeholder="Last Name Here" autofocus required/> 
 
     </label> 
 
     <label><span>Date of Birth</span> 
 
      <input name="date_of_birth" type="date" value="" placeholder="Date of Birth" autofocus required/> 
 
     </label> 
 

 

 
     <label><span>Level of Education</span> 
 
      <input name="level_of_education" type="" value="" placeholder="" autofocus required/> 
 
     </label> 
 
     <select name="education_level"> 
 
      <option value="High School">High School</option> 
 
      <option value="Undergraduate">Undergradute</option> 
 
      <option value="Graduate">Graduate</option> 
 
     </select> 
 
     <label><span>Number of years until next degree is completed </span> 
 
      <input type="number" name="quantity" min="1" max="6" autofocus> 
 
     </label> 
 
     </fieldset> 
 
     <fieldset> 
 
     <legend><i class="fa fa-envelope-o" aria-hidden="true"></i> Contact Information</legend> 
 

 
     <label><span>Email</span> 
 
      <input class="ghost-input" name="email" value="" type="email" placeholder="[email protected]" autocomplete="off" /> 
 
     </label> 
 

 
     <label><span>Phone Number</span> 
 
      <input name="phonenumber" value="" type="tel" placeholder="743-558-2196" /> 
 
     </label> 
 

 
     <label><span>Website</span> 
 
      <input name="website" value="" type="url" placeholder="https://yoururl.com" /> 
 
     </label> 
 
     </fieldset> 
 
    </section> 
 
    <section class="clearfix column"> 
 
     <fieldset> 
 
     <legend><i class="fa fa-laptop" aria-hidden="true"></i> What are your Interests</legend> 
 
     <label><span>Web Design</span> 
 
      <span class="in_container"> 
 
      <input name="webdesign" value="web_design" type="checkbox" /> 
 
      </span> 
 
     </label> 
 

 
     <label><span>Web Development</span> 
 
      <span class="in_container"> 
 
      <input name="webdevelopment" value="web_development" type="checkbox" /> 
 
      </span> 
 
     </label> 
 

 
     <label><span>Computer Science</span> 
 
      <span class="in_container"> 
 
      <input name="computerscience" value="computer_science" type="checkbox" /> 
 
      </span> 
 
     </label> 
 
     <label><span>Graphic Design</span> 
 
      <span class="in_container"> 
 
      <input name="graphicdesign" value="graphic_design" type="checkbox" /> 
 
      </span> 
 
     </label> 
 

 
     <label><span>User Experience</span> 
 
      <span class="in_container"> 
 
      <input name="userexperience" value="user_experience" type="checkbox" /> 
 
      </span> 
 
     </label> 
 

 
     <label><span>App Development</span> 
 
      <span class="in_container"> 
 
      <input name="appdevelopment" value="app_development" type="checkbox" /> 
 
      </span> 
 
     </label> 
 

 
     </fieldset> 
 
     <fieldset> 
 
     <legend><i class="fa fa-volume-control-phone" aria-hidden="true"> 
 

 
</i> Continuation 
 
     </legend> 
 
     <legend>You can contact me by:</legend> 
 
     <br> 
 
     <label><span>Contact me by phone</span> 
 
      <span class="in_container"> 
 
      <input name="contact_me" type="radio" value="phone" checked/> 
 
      </span> 
 
     </label> 
 
     <label><span>Contact me by email</span> 
 
      <span class="in_container"> 
 
      <input name="contact_me" type="radio" value="email" /> 
 
      </span> 
 
     </label> 
 
     <label><span>Contact me by text</span> 
 
      <span class="in_container"> 
 
      <input name="contact_me" type="radio" value="text" /> 
 
      </span> 
 
     </label> 
 
     <br> 
 
     <legend>I'm interested in:</legend> 
 
     <br> 
 

 
     <label><span>Undergraduate</span> 
 
      <span class="in_container"> 
 
      <input name="interest" type="radio" value="text" /> 
 
      </span> 
 
     </label> 
 
     <label><span>Graduate</span> 
 
      <span class="in_container"> 
 
      <input name="interest" type="radio" value="text" /> 
 
      </span> 
 
     </label> 
 
     <label><span>Online</span> 
 
      <span class="in_container"> 
 
      <input name="interest" type="radio" value="text" /> 
 
      </span> 
 
     </label> 
 
     </fieldset> 
 
    </section> 
 
    </form> 
 
    <br> 
 
    <span class="in_container"> 
 
    <input name="submit_to_programmer" type="submit" value="Submit" /> 
 
    </span> 
 
    <script src="https://use.fontawesome.com/8f5d316ef9.js"></script> 
 
</body> 
 

 
</html>

источник

2016-10-16 19:11:36 repzero

Подчеркнутый вопрос с формой

ответ

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