HTML Button Border

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

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

источник

2012-01-18 raphnguyen

border-color: # 00ffff; - это может изменить ситуацию – Silvertiger

Спасибо! Это сделал трюк. Такой глупый надзор. – raphnguyen

границы по умолчанию будет прямоугольник, хотя и с некоторыми браузерами (не все), вы можете использовать «границу радиус: 5px» чтобы получить закругленные углы

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

вы также можете просто сделать изображения с помощью кнопок, которые вы хотите, и использовать их вместо (PNG является предпочтительным, поскольку он будет держать прозрачность)

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

Я использую это часто вместо просто img src =, тогда вы можете добавить «на mouseclick» с javascript .. просто вариант. Кроме того, курсор может быть изменен, так что на самом деле выглядит так, как будто они перекатываются по кнопке :)

источник

2012-01-18 19:46:15 Silvertiger

избили меня ... и вы дали больше информации, славное дополнение с деталями реализации использования изображения –

Спасибо. Думаю, округленная граница не слишком важна в этом случае. Я просто хотел бы сохранить формат по умолчанию класса 'button' и просто иметь рамку вокруг кнопки. Прямо сейчас, на ярлыке кнопки по умолчанию было черным (оно должно быть синим), а граница также по умолчанию черная (она должна быть красной). Создание изображения кнопки не кажется идеальным, так как наша веб-страница просто использует стандартный '' '' 'класс' 'класса. – raphnguyen

причина, по которой одна кнопка не работает, потому что вы не добавляли кавычки вокруг класса .. было это намеренно? – Silvertiger

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

источник

2012-01-18 19:50:14

Похоже, что установка кнопки 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, это выглядит следующим образом:
и в Safari:

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

источник

2014-03-22 07:41:16

В IE он не работает. Поэтому я сомневаюсь, что это решение универсально. – Intacto

HTML Button Border

ответ

Смежные вопросы