Question

我正在尝试区分按钮，以便客户端可以看到它是页面加载时默认处于焦点的按钮。该设计需要在按钮周围设置简单的边框。我的css中定义了button和button1，如下所示：

.button
{
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #003366
}

.button1 {
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
font-weight: bold; 
color: #003366
border: #00ffff;
border-style: solid;
border-width: 2px;
}

我尝试对焦的按钮会丢失默认格式。我怎么能解决这个问题，以便它只是保持格式化，唯一的区别是按钮周围的边框较粗？另外，有没有办法让边框简单地围绕按钮的形状包裹而不是矩形边框？

以下是我的按钮的图像：

enter image description here

在这种情况下，我正在尝试关注Jail Address按钮。

输入按钮的html如下：

<input type="reset" class="button" name="refresh" value="Refresh">
<input type="submit" class=button1 name="jail" value="Jail Address" onClick="action='JailAddresses.html'">
<input type="submit" class="button" name="submit" value="Submit" onClick="action='Administrative.html'"> 
<input type="submit" class="button" name="back" value="Back" onClick="action='Administrative.html'">

Answer 1

默认情况下边框将是矩形，但是对于某些浏览器（不是全部），您可以使用“border-radius：5px”来获得圆角

http://www.css3.info/preview/rounded-border/

您也可以使用您想要的按钮制作图像并使用它们（png是首选，因为它会保持透明度）

.button1 {
    background-image:url('paper.gif');
    background-repeat: no-repeat;
    cursor: hand;
}

我经常使用它而不仅仅是img src =，然后你可以用javascript添加“on mouseclick”..只是一个选项。此外，光标可以更改，因此它实际上看起来像是滚动按钮：）

Answer 2

似乎设置按钮border:x样式可以完全改变按钮渲染，至少在Safari和Firefox中是这样。这是我用来演示效果的一个小测试文件：

<html>
  <head>
  </head>
  <body>
    <form>
      <input type="submit" value="no border"/>
      <input type="submit" value="border:0" style="border:0;"/>
      <input type="submit" value="border:2" style="border:2;"/>
      <input type="submit" value="width:8rem" style="width:8rem;"/>
    </form>
  </body>
</html>

在MacOS上的Firefox中呈现，它看起来像这样：
并在Safari中：

所以看起来行为取决于边界值和浏览器。对我来说似乎很奇怪，但你有。我认为这解释了原始问题中描述的效果。

Answer 3

UI元素（如按钮）的默认样式是用户代理定义的，AFAIK没有边框设置，可以让您按照按钮的轮廓而不使用CSS3的border-radius。也许您应该为没有预定义形状的按钮使用不同的元素，或者在适当的情况下使用border-radius，或者使用具有您想要的形状的背景图像。

HTML按钮边框

3 个答案: