Может ли какой-либо элемент HTML быть стилизован как fieldset / legend? - PullRequest
Новая
       12

Может ли какой-либо элемент HTML быть стилизован как fieldset / legend?

8 голосов
/ 17 июля 2010

Используя свойство display, элементы HTML становятся взаимозаменяемыми с точки зрения стиля. Однако, похоже, это не относится к fieldset и legend.

Можно ли стилизовать другие элементы HTML, чтобы они выглядели как fieldset и legend?

Ответы [ 4 ]

3 голосов
/ 17 июля 2010

Предыдущий ответ неверен, если вы хотите понять, почему попробуйте это: 

<body style="background-color: #f00">
  <div style="border: 1px solid #000">
      <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
  </div>
  <fieldset><legend>Foobar</legend></fieldset>
</body>

AFAIK Нет способа получить эффект разрушения границы, который элемент legend вызывает на fieldset границаЯ не верю, что это возможно только с помощью CSS, это всего лишь часть способа визуализации тега fieldset.

Разъяснение : я не знаю ни одногоспособ позиционирования блока или встроенного элемента таким образом, чтобы он перекрывал видимую границу содержащего его элемента блока, а затем приводил к разрыву границы элемента контейнера за его блоком.Это то, что <legend> делает с границей своего содержащего <fieldset> элемента.

3 голосов
/ 18 июля 2010

Это работает довольно хорошо, но ie6 будет вести себя немного странно, если фоном является изображение, ничего условный комментарий не может исправить Протестировано в IE6-8, FF3.6, Safari 5, Chrome 5 

.fieldset {
    position: relative;
    border: 1px solid #000;
    margin: 20px;
    padding: 20px;
    text-align: left;
}

.fieldset .legend {
    background: #fff;
    height: 1px;
    position: absolute;
    top: -1px;
    padding: 0 20px;
    color: #000;
    overflow: visible;
}

.fieldset .legend span {
    top: -0.5em;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    overflow: visible;
}


   <div class="fieldset">
      <div class="legend">
         <span>This is the title</span>
      </div>
      Test
   </div>
2 голосов
/ 17 июля 2010

Конечно, например: элемент DIV с рамкой и дочерний элемент заголовка с набором цвета фона, расположенным так, чтобы перекрывать границу DIV, будут выглядеть как набор полей и легенда.

Очень простой пример: 

<div style="border: 1px solid #000">
    <h1 style="background: #fff; margin-top: -5px; margin-left: 10px; padding: 0 10px; width: 150px;">Foobar</h1>
</div>
0 голосов
/ 13 июня 2015

Итак, я исправил код так, чтобы он выглядел несколько (он действительно похож на тег легенды) как тег легенды 

    <div style="border: 2px groove #ccc">
    <h1 style="font-weight:normal; background: #fff; margin-top: -11px; margin-left: 10px; padding: 0 10px 0 0; width: 40px; height:20px; font-size:1em;">Foobar</h1>
</div>
  <fieldset><legend>Foobar</legend></fieldset>
...