Блог

Главная - Вопросы по программированию - Форма ввода с нижней границей, простирающейся до конца div без перемещения текста

Форма ввода с нижней границей, простирающейся до конца div без перемещения текста

#html #css #forms

#HTML #css #формы

Вопрос:

Пытаюсь продлить красную строку до конца цветного div.
но если я сделаю ширину 100%, он переместит входной тег ниже текста, есть ли способ сделать это без индивидуальных свойств ширины 

 #contact-heading{
    color: #838386;
    font-weight: bold;

}
.contactForm{
    background-color: #b7dcd8;
    margin-right: 30%;
    padding: 2% 0 0 2%;

    font-family: Serif;
    font-size: 12pt;
}
.formtitle{
    border: none;
}
.forminput{
    border: none;
    border-bottom: 2px solid red;
    background-color: #b7dcd8;
}  
 <div class="contact-main">
    <div class="container">
    <h1 id="contact-heading">CONTACT US</h1>
    </div>
    <div class="container">
        <form class="contactForm">
            <p class="formtitle">FIRST NAME:<input class="forminput"></p> <br>
            <p class="formtitle">YOUR EMAIL: <input class="forminput"></p> <br>
            <p class="formtitle">CONFIRM EMAIL: <input class="forminput"></p> <br>
            <p class="formtitle">CONTACT NUMBER: <input class="forminput"></p> <br>
            <p class="formtitle">SUBJECT: <input class="forminput"> <br></p>
            <br>
            YOUR QUERY:<br>
            <textarea cols="50" rows="7"></textarea>
            <br>
            <br>


            <input type="checkbox" value="mailinglist">Please tick to indicate you wish to placed on our mailing list
            <br>
            <input type="reset">
            <input type="submit">
        </form>
    </div>
</div>

Ответ №1:

Используйте позиционированный псевдоэлемент в абзаце

 #contact-heading {
  color: #838386;
  font-weight: bold;
}
.contactForm {
  background-color: #b7dcd8;
  margin-right: 30%;
  padding: 2% 0 0 2%;
  font-family: Serif;
  font-size: 12pt;
}
.formtitle {
  border: none;
  position: relative;
  overflow: hidden;
  /* required */
}
.formtitle::after {
  content: '';
  width: 100vw;
  height: 0px;
  border-bottom:2px solid red;
  position: absolute;
  bottom:1px;
}
.forminput {
  border: none;
  border-bottom: 2px solid red;
  background-color: #b7dcd8;
}  
 <div class="contact-main">
  <div class="container">
    <h1 id="contact-heading">CONTACT US</h1>
  </div>
  <div class="container">
    <form class="contactForm">
      <p class="formtitle">FIRST NAME:
        <input class="forminput">
      </p>
      <br>
      <p class="formtitle">YOUR EMAIL:
        <input class="forminput">
      </p>
      <br>
      <p class="formtitle">CONFIRM EMAIL:
        <input class="forminput">
      </p>
      <br>
      <p class="formtitle">CONTACT NUMBER:
        <input class="forminput">
      </p>
      <br>
      <p class="formtitle">SUBJECT:
        <input class="forminput">
        <br>
      </p>
      <br>YOUR QUERY:
      <br>
      <textarea cols="50" rows="7"></textarea>
      <br>
      <br>


      <input type="checkbox" value="mailinglist">Please tick to indicate you wish to placed on our mailing list
      <br>
      <input type="reset">
      <input type="submit">
    </form>
  </div>
</div>

Комментарии:

1. Спасибо. это работает идеально, и тег subject был отключен только из-за моего размещения тега <BR>

Ответ №2:

Лучше иметь элемент Label для ввода. Если вы хотите, чтобы ваш ввод также был 100%, а не только border, вы можете использовать display:table

 #contact-heading{
color: #838386;
font-weight: bold;

}
.contactForm{
background-color: #b7dcd8;
margin-right: 30%;
padding: 2% 0 0 2%;

font-family: Serif;
font-size: 12pt;
}
.formtitle{
border: none;
}
.forminput{
border: none;
border-bottom: 2px solid red;
background-color: #b7dcd8;
display: table-cell;
width: 100%;
}
.formtitle {
    display: table;
    width: 100%;
}
.label-text {
    display: table-cell;
    width: 10%;
    white-space: nowrap;
}  
 <div class="contact-main">
    <div class="container">
        <h1 id="contact-heading">CONTACT US</h1>
    </div>
    <div class="container">
        <form class="contactForm">
            <p class="formtitle">
                
            <label class="formtitle">
                    <span class="label-text">YOUR EMAIL:</span>
                <input class="forminput">
            </label>

            <label class="formtitle">
                    <span class="label-text">CONFIRM EMAIL</span>
                <input class="forminput">
            </label>

            <label class="formtitle">
                    <span class="label-text">SUBJECT:</span>
                <input class="forminput">
            </label>
            
            YOUR QUERY:<br>
            <textarea cols="50" rows="7"></textarea>
            <br>
            <br>


            <input type="checkbox" value="mailinglist">Please tick to indicate you wish to placed on our mailing list
            <br>
            <input type="reset">
            <input type="submit">
        </form>
    </div>
</div>