如何更改联系表单上的提交按钮字体

时间:2013-07-14 19:46:49

标签: html css webforms

从最后的第7行我尝试添加一些CSS,但它不会改变按钮上的字体。有没有办法在CSS或PHP中做到这一点? (或者也许是一种在HTML中实际工作的方式)

提前致谢!我真的很陌生。

这是我的代码:

<form name="htmlform" method="post" action="something_sendform.php">
<table width="450px">
</tr>
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>

<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>

</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>

</tr>
<tr style="font-family:Orator Std">
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">
 </td>
</tr>
</table>
</form>

2 个答案:

答案 0 :(得分:5)

使用font-family CSS属性:

input[type=submit]{
    font-family: 'Orator Std';
}

要兼容所有浏览器,请在按钮中添加class="mysubmitbutton",然后使用input.mysubmitbutton代替input[type=submit]

修改:如果您想直接在HTML代码中执行此操作,请在input标记上执行此操作:

<input type="submit" value="Submit" style="font-family:'Orator Std';" />

我不确定Orator Std是否为原生CSS字体...对于HTML / CSS中的自定义字体用法,请参阅this question

答案 1 :(得分:1)

您在错误的元素上应用样式。试试这个:

<input type="submit" value="Submit" style="font-family: sans-serif; font-size: 25px;">

请注意,Orator Std是自定义字体,如果您想使用它,则必须下载字体文件并使用@font-face将其加载到CSS中。

此外,使用内联样式通常被认为是一种不好的做法,最好在CSS文件中或input[type=submit]标记内应用<style>上的样式。 This更详细地回答了问题。

演示:http://jsfiddle.net/Dq3Mg/