如何将blockquote +引用为表单fieldset + legend的样式？

我正在试图设计一个和cite子元素来复制fieldset和legend元素的外观，在该元素的外围有一个边框，并且图例标签位于边框的顶部 - 如果您的“我看过一个字段，你会明白我的意思。如何将blockquote +引用为表单fieldset + legend的样式？

我有一个解决方案，我给cite一个背景颜色，但这只会在放在类似的彩色背景上时才起作用。 我需要一个解决方案，将所有的背景，BG图像等IE8 +

假设下面的标记工作（不能从这个改变没有额外的元素允许）：

<blockquote class="quote"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi 
     facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam 
     delectus. Reiciendis repellat illo, et natus earum odit! 
     <cite class="attribution">Mr. Jefferson</cite> 
    </blockquote>

CSS我到目前为止有：

.quote { 
    border: 4px solid black; 
    padding: 1rem; 
    position: relative; 
} 
.attribution { 
    position: absolute; 
    top: 0; 
    left: 1rem; 
    margin-top: -0.65rem; 
    padding: 0 1rem; 
    background: white; /* this works, but breaks if the background isn't white. I need a solution that works for all possible page bg colors */ 

}

这是我到目前为止有：http://jsbin.com/viqegerivi/edit?html,css,output

来源

2015-12-02 Prefix

没有CSS的“继承父背景颜色，除非家长有'transparent'，在这种情况下，从其父继承递归”，所以我恐怕你必须使用Javascript来做到这一点。 –

@MrLister这不是我要问的。我想让它透明。背景颜色技术只是一个黑客。它应该复制fieldset/legend的行为。使用背景颜色是我能得到的最接近的颜色，我特别不想使用bg颜色。 – Prefix

但问题是，当您使用透明时，父项的边框在文本后面可见。你需要一个背景。 –

我不得不承认，我很喜欢日是一个。使用绝对位置:before s和:after s，没有触及您的HTML标记，但正如预期的那样，在CSS上疯狂使用。干杯!

fieldset { 
 
    border: 4px solid black; 
 
    padding: 1rem 2rem; 
 
} 
 
legend { 
 
    font-style: italic; 
 
    padding: 0 1rem; 
 
} 
 
.quote { 
 
    border-bottom: 4px solid black; 
 
    padding: 2.6rem calc(2rem + 6px) 1rem; 
 
    position: relative; 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 
.quote:before, 
 
.quote:after { 
 
    content: ' '; 
 
    position: absolute; 
 
    width: 4px; 
 
    height: 100%; 
 
    background-color: black; 
 
    bottom: 0; 
 
    top: 1rem; 
 
} 
 
.quote:after { 
 
    left: 0; 
 
} 
 
.quote:before { 
 
    right: 0; 
 
} 
 
.attribution { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    margin-left: 2.4rem; 
 
    margin-top: .35rem; 
 
    padding: 0 1rem; 
 
    background: transparent; 
 
} 
 
.attribution:before, 
 
.attribution:after { 
 
    position: absolute; 
 
    content: ' '; 
 
    bottom: calc(50% - 1px); 
 
    height: 4px; 
 
    background-color: black; 
 
    width: 100vw; 
 
} 
 
.attribution:before { 
 
    right: 100%; 
 
} 
 
.attribution:after { 
 
    left: 100%; 
 
}

<p>Desired Look:</p> 
 
<fieldset> 
 
    <legend>Mr. Jefferson</legend> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit! 
 
</fieldset> 
 

 
<p>What I currently have:</p> 
 
<blockquote class="quote"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas rem, animi facere illum deserunt nam ipsa, et sapiente quisquam sed repudiandae aliquam delectus. Reiciendis repellat illo, et natus earum odit! 
 
    <cite class="attribution">Mr. Jefferson</cite> 
 
</blockquote>

编辑：由于李斯特先生发现，有这种和fieldbox标题模型之间的型差分：该块引用的后台运行上述（什么样子）top border 。

我个人不认为这是一个显著的问题，因为

它可以通过添加背景剪报额外的包装很容易克服的，所以这是可以实现的，但需要一个稍微复杂的标记。
我不认为很多人会使用这种模式的背景颜色是不同的页面。我个人的看法是，当使用透明背景时，这个模型看起来最好（这就是为什么我们打断这条线，对吧？）。

另外，我为自己设定的首要挑战是在不触及标记的情况下达到效果。

来源

2015-12-02 19:25:21

太神奇了！我不确定这可以做到。明星给你，CSS忍者。 :) – Prefix

真棒，我想知道如何去做这件事。 – wmeade

非常好。 +1。但是，如果您给它们背景颜色，则fieldset和blockquote之间会有细微差别。参见[Fiddle]（http://jsfiddle.net/MrLister/efL2ehtu/）。（blockquote背景延伸到它的边界之上） –

这个我试过了，效果很好：

html {background:blue} 
fieldset { 
    border: 4px solid black; 
     padding: 1rem 2rem; 
} 
legend { 
    font-style: italic; 
    padding: 0 1rem; 
} 


.quote { 
    border: 4px solid black; 
    padding: 1rem; 
    width:auto; 
    margin:0; 
    position: relative; 
} 
.attribution { 
    position: absolute; 
    top: 0; 
    left: 1rem; 
    margin-top: -0.65rem; 
    padding: 0 1rem; 
    background:blue 

}

来源

2015-12-02 20:48:04 mHenderson

你错过了这部分的问题：*“我有一个解决方案，在这个解决方案中我给出了一个背景颜色，但是这只会在放置在类似的彩色背景上时才起作用。需要一个解决方案，将工作在所有背景，bg图像等在IE8 +“* –

我没有考虑图像，对。我没有调整填充。 – mHenderson

如何将blockquote +引用为表单fieldset + legend的样式？

回答

相关问题