Пользовательская граница для набора полей и легенды

извините, если этот вопрос уже задавался, мой друг попросил меня сделать такой набор полей для их веб-сайта.

скрин по этой ссылке

настраиваемая граница набора полей

это выглядит как обычное, но мне любопытно, как мне получить эту маленькую вертикальную линию слева и справа от Aim, чтобы сохранить текст.

Помощь будет высоко оценена.

С уважением,


html css fieldset legend
person Felix Agung    schedule 15.09.2017    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Вы можете использовать псевдоэлементы :before и :after для оформления этих двух конкретных вертикальных линий:

fieldset {
  border:1px solid gray;
}
legend {
  padding: 0.2em 0.5em;
  color: gray;
  font-size: 90%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
legend:before {
  position: absolute;
  content: '';
  height: 8px;
  border-left: 1px solid gray;
  left: 0px;
  top: 7px;
}
legend:after {
  position: absolute;
  content: '';
  height: 8px;
  border-right: 1px solid gray;
  right: 0px;
  top: 7px;
}
<form>
  <fieldset>
  <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>

person Dekel    schedule 15.09.2017
comment
Это следует принять как ответ, поскольку он прямо отвечает на вопрос и даже включает рабочий фрагмент. - person Elliott Jones; 30.07.2019
comment
@ElliottJones спасибо за ваш комментарий. Я не уверен, что оригинальный постер все еще доступен здесь, чтобы принять этот ответ. Но спасибо за голос :) - person Dekel; 04.08.2019
comment
нет проблем. Меня раздражает, когда я вижу, как кто-то на SO сталкивается с проблемой тщательного ответа на вопрос с несколькими ответами, но не получает зеленой галочки, особенно когда единственный другой ответ претендует на улучшение, но не работает. Здоровья и спасибо. - person Elliott Jones; 06.08.2019
comment
Этот работает в Chrome 90, но не в Firefox 88. - person Stephen; 24.05.2021
comment
@Stephen - внес некоторые изменения в пример, теперь он должен работать и с Firefox 88. Пожалуйста, проверьте и дайте мне знать, если есть еще какие-либо проблемы. - person Dekel; 25.05.2021

arrow_upward
-3
arrow_downward

Здесь есть некоторые улучшения.

fieldset {
  border:1px solid gray;
}
legend {
  position: relative;
  left: 50%; 
     /* Move the legend to the center of the fieldset's top border */

  transform: translateX(-50%); 
     /* Fix the alignment to center perfectly */

  background-color: white; 
     /* Put whatever color you want */

  padding: 0.2em 0.5em;
  color: gray;
  font-size:90%;
  text-align:center;
  position: relative;
}
legend:before {
  position: absolute;
  content: '';
  height: 8px;
  border-left: 1px solid gray;
  left: 0px;
  top: 7px;
}
legend:after {
  position: absolute;
  content: '';
  height: 8px;
  border-right: 1px solid gray;
  right: 0px;
  top: 7px;
}
#line {
  position: absolute;
  top: 19px; /* Position the line */
  left: 12px;
  border-top: 1px solid gray;
  min-width: 20%; /* Fix this according to the white space to hide */
}
<form>
  <fieldset>
 <!-- Add a div here to make up a line to hide
         the space left by the legend -->
  <div id="line"></div>
  <legend>Subscription info</legend>
    <label for="name">Username:</label>
    <input type="text" name="name" id="name" />
    <br />
    <label for="mail">E-mail:</label>
    <input type="text" name="mail" id="mail" />
    <br />
    <label for="address">Address:</label>
    <input type="text" name="address" id="address" size="40" />
  </fieldset>
</form>

Надеюсь, поможет...

person theAlexandrian    schedule 15.09.2017
comment
Вы запустили фрагмент? Посередине огромная дыра, а этикетка сбоку? - person trainmania100; 16.07.2019
comment
Этот работает в Firefox 88, но не в Chrome 90. - person Stephen; 24.05.2021