html - 如何在 CSS 中设置表单提交按钮的样式？

Question

我有一个问题，我无法解决。

我有一个网站，顶部有一个看起来不错的菜单。如果您将鼠标悬停在它突出显示的菜单上方，它不是 JavScript 而是 HTML 1 strict(必须是这个)。

我做了一个像这样的:

<form action="masterpage.cgi" method="post">
<input type="hidden" name="test" value="hoi">
<input type="submit" value="opgave2" />
</form> 

这很好用，但看起来很丑。我想使用我的顶部导航链接(或者我希望它是看起来相同的按钮)作为提交按钮。我怎样才能做到这一点 ？

菜单链接:

<li><a href="../Nieuws/Nieuws.html">Nieuws </a></li>

当前的CSS:

ul.topNav  {
    margin:0px;
    padding:0px;
    width:960px;
}
.topNav li{
     float:left;
     display:inline-block;
}

Answer 1

如果您想更好地控制提交按钮的样式，请按如下方式使用按钮标签:

HTML

<form action="masterpage.cgi" method="post">
    <input type="hidden" name="test" value="hoi">
    <button type="submit" name="submit">opgave2</button>
</form> 

CSS - 在这种情况下，我将其样式设置为看起来像一个链接。 (不是最好的主意，只是一个例子)

ul.topNav {
    margin:0;
    padding:0;
    width:960px
}   
.topNav li {
    float:left;
    display:inline-block
}   
button {
    background:none;
    border:none;
    color:#00C;
    font-size:24px
}   
button:hover {
    text-decoration:underline;
    cursor:pointer
}