Question

我希望我的表单中有黑色文字，下划线为红色。使用border-bottom: 1px solid red;的问题是，它不仅强调文本，还强调输入按钮的整个长度。如果未激活，该按钮既没有边框也没有背景。因此，如果每条线的重叠距离为5px左右，那么它看起来很奇怪......

<form method="POST">
    <input type="hidden" name="cmd" value="doSthFancy" />
    <input type="hidden" name="item_id" value="${item.id}" />
    <input type="submit" value="${item.name} (${item.producer})" class="link" />
</form>

使用div（<div class="redUnderline"><p class="blackText"> hello world! </p></div>）嵌套通常有效，但似乎只是在表单之外。

我不能使用hrefs。

感谢您的帮助！

Answer 1

按钮怎么样，跨度？我试过这个：

<button style="padding: 20px;"><span style="border-bottom: dotted 1px red;">some text</span></button>

它似乎有效。红色虚线边框仅为文本加下划线。

Answer 2

fake button怎么样？

DEMO

<强> HTML

<form name="myform">
    <div id="fakeButton" onclick="myform.submit()">
        <span>Click Me</span>
    </div>
</form>

<强> CSS

#fakeButton
{
    border-style:solid;
    border-width:1px;
    background-color:#808080;
    width:70px;
    text-align:center;
    padding:5px;

}
#fakeButton span
{
    color:black;
    border-bottom-style:solid;
    border-bottom-color:red;
    border-width:1px;
}

在HTML表单中 - 如何使用非文本颜色加下划线？

2 个答案: