0
如果之前询问过此问题,我的朋友要求我为他们的网站进行这种字段集操作。字段集和图例的自定义边框
截图在这个环节custom fieldset border
它看起来像一个正常的人,但我很好奇我怎么在左边和右边那个小竖线“宗旨,以保存”的文字。
帮助将不胜感激。
问候,
如果之前询问过此问题,我的朋友要求我为他们的网站进行这种字段集操作。字段集和图例的自定义边框
截图在这个环节custom fieldset border
它看起来像一个正常的人,但我很好奇我怎么在左边和右边那个小竖线“宗旨,以保存”的文字。
帮助将不胜感激。
问候,
您可以使用:before
和:after
伪元素,以风格这两个特定的垂直线:
fieldset {
border:1px solid gray;
}
legend {
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;
}
<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>
这里是一定的改善。
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>
希望它可以帮助...
你核对答案? – Dekel