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

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>) 通常有效，但似乎只是在表单之外。

我不能改用 href。

感谢您的帮助!

Answer 1

按钮和 span 怎么样？我试过这个:

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

这似乎奏效了。红色虚线边框仅在文本下划线。