HTML Button Border - PullRequest
Новая
       13

HTML Button Border

3 голосов
/ 18 января 2012

Я пытаюсь выделить кнопку, чтобы клиенты могли видеть, что эта кнопка находится в фокусе по умолчанию при загрузке страницы.Дизайн требует простой границы вокруг кнопки.У меня button и button1 определены в моем CSS следующим образом: 

.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'">

Ответы [ 3 ]

4 голосов
/ 18 января 2012

граница по умолчанию будет прямоугольной, хотя в некоторых браузерах (не во всех) вы можете использовать "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 ... просто опция. Кроме того, курсор можно изменить, чтобы он выглядел так, как будто он катится по кнопке:)

3 голосов
/ 22 марта 2014

Похоже, что установка стиля кнопки 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>

  • Рендеринг в Firefox на MacOS выглядит следующим образом:

    buttons example rendered in Firefox

  • и в Safari:

    buttons example rendered in Safari

Таким образом, похоже, что поведение зависит как от значения границы, так и от браузера.,Кажется странным для меня, но ты здесь.Я думаю, что это объясняет эффект, описанный в оригинальном вопросе.

0 голосов
/ 18 января 2012

Стили по умолчанию для элементов пользовательского интерфейса, таких как кнопки, определяются пользовательским агентом. В AFAIK нет настройки границы, которая позволит вам следовать контурам кнопки без использования CSS3 border-radius .Возможно, вам следует использовать другой элемент для кнопок, которые не имеют предварительно определенной формы, или использовать border-radius, если это необходимо, или фоновое изображение, для которого имеет желаемую форму.

...