Может ли любой элемент HTML быть стилизован как набор полей/легенда?

С помощью display свойство, HTML-элементы становятся взаимозаменяемыми с точки зрения стиля. Кажется, это не относится к fieldset и legend однако.

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

8
css fieldset html legend

4 ответов

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

<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

это работает довольно хорошо, но 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>
3

конечно, например: элемент 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>
2

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

    <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>
0