HTML 按钮边框答案

【问题标题】：HTML Button BorderHTML 按钮边框
【发布时间】：2012-02-13 12:49:45
【问题描述】：

我试图区分一个按钮，以便客户可以看到它是在页面加载时默认处于焦点的按钮。该设计要求按钮周围有一个简单的边框。我在我的 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;
}

我试图聚焦的按钮失去了默认格式。我该如何解决这个问题，以便它简单地保持其格式，唯一的区别是按钮周围的边框更厚？另外，有没有办法让边框简单地围绕按钮的形状而不是矩形边框？

这是我的按钮的样子：

在这种情况下，我试图聚焦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'">

【问题讨论】：

边框颜色：#00ffff; - 这可能会有所作为
谢谢！那成功了。如此愚蠢的疏忽。

标签： html css button border

【解决方案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”.. 只是一个选项。此外，可以更改光标，使其实际上看起来像是在一个按钮上滚动:)

【讨论】：

打败了我......你提供了更多信息，很好地补充了使用图像的实现细节
谢谢。我猜在这种情况下，圆形边框并不太重要。我只想保留button 类的默认格式，并且按钮周围只有一个边框。现在，按钮标签默认为黑色（应该是蓝色），边框也默认为黑色（应该是红色）。制作按钮的图像似乎并不理想，因为我们的网页只是使用默认的 HTML button 类。
一个按钮不起作用的原因是因为您没有在类周围添加引号..这是故意的吗？
我发现无论有没有引号都没有区别，但我将它们添加回来只是为了确保。它不能解决我的问题。

【解决方案2】：

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

【讨论】：

【解决方案3】：

似乎设置按钮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 中：

因此，行为似乎取决于边框值和浏览器。对我来说似乎很奇怪，但你在那里。我认为这解释了原始问题中描述的效果。

【讨论】：

在 IE 中它不起作用。所以，我怀疑这个解决方案是否通用。