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

Question

我希望表单中有黑色文本，用红色下划线。使用border-bottom: 1px solid red;的问题在于，它不仅在文本下方加下划线，而且在输入按钮的整个长度下方加下划线。如果未激活，则该按钮既没有边框也没有背景。因此，如果这条线每侧重叠5倍左右，看起来很奇怪。。。

<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怎么样？

演示

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;
}