Великолепные веб-кнопки с правильным поведением, это можно сделать?

Question

Для моего приложения я хотел красиво оформить кнопки отправки. С обычным CSS мне удалось заставить его выглядеть хорошо в Firefox и ужасно в IE. Тогда я увидел эту запись в блоге:

http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/

Используя эту технику, вы получаете великолепные кнопки практически во всех браузерах. Однако есть также несколько проблем с доступностью:

• Поскольку он использует ссылки вместо реального ввода HTML или элементы кнопки, нажатие кнопки не отправляет форму. Это легко решается с помощью Javascript, но было бы идеально, если бы кнопка отправки работала без включенного Javascript.
• Другая проблема заключается в том, что нажатие [ENTER] не отправляет форму. Грязный взлом состоит в том, чтобы включить невидимый элемент ввода типа «отправить» или «изображение».

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

Мне действительно нужно выбирать между грязными взломами или плохим стилем?

Каждый учебник по стилю кнопок, который я видел до сих пор, имеет в IE недостаточно оптимальные результаты: (

Answer 1

Мне действительно нужно выбирать между грязными взломами или плохим стилем?

Нет, вы можете использовать Javascript, как и все мы. Загрузите вашу стандартную форму (в комплекте с кнопкой submit), а затем используйте аккуратно написанный Javascript для динамического «исправления» некоторых уродливых элементов. Я бы посоветовал оценить инфраструктуру jQuery для этого типа вещей, если вы хотите использовать чистый код и получить поддержку кросс-браузер.

Answer 2

См. этот урок . Нет JavaScript, нет ссылок вместо кнопок, работает в IE6 через IE8.

Answer 3

Для моего приложения я хотел красиво оформить кнопки отправки. С обычным CSS мне удалось заставить его выглядеть хорошо в Firefox и ужасно в IE.

Для IE вам нужно добавить overflow: visible;, чтобы избавиться от «необъяснимых» отступов. Это в основном все, что вам нужно учитывать для IE (если вы не в режиме quirksmode).

Тогда я увидел эту запись в блоге:

Не пошел бы на это. Просто придерживайтесь <button type="submit"> или <input type="submit"> с хорошим стилем CSS. Вы даже можете использовать фоновые изображения CSS на этих кнопках. Я бы не стал брать Javascript за проблемы с макетом, потому что это может вызвать "wtf?" ощущения во время загрузки страницы, когда пользователь мгновенно видит части страницы, быстро меняющиеся. Просто используйте CSS умным способом.

Answer 4

На самом деле вам не нужно использовать Javascript или что-то подобное. Вы также можете использовать кнопки.

Продолжая с http://www.sohtanaka.com/web-design/liquid-color-adjustable-css-buttons/, внесите следующие изменения:

1. Добавьте следующее в объявление CSS

   .btn button { плыть налево; высота: 40 пикселей; background: url (images / btn_stretch.png) repeat-x слева вверху; высота строки: 40px; отступы: 0 10px; цвет: #fff; размер шрифта: 1em; текстовое оформление: нет; граница: 0; }

2. Добавьте в код HTML следующее:

   Вам стоит попробовать

Редактировать: и добавить поле: 0 к объявлению кнопки CSS.

Answer 5

Да, вы делаете.

За исключением того, что это не «плохой стиль», это браузер Chrome. Элементы формы являются частью браузера. «Стилизация» их сбивает с толку пользователя и затрудняет юзабилити. Серьезно, просто оставь их в покое.

Независимо от того, как далеко вы зайдете со стилем ввода, вы неизбежно столкнетесь с кирпичной стеной элемента загрузки файла, который практически невозможно стилизовать. И если вы не можете стилизовать их все, зачем их стилизовать.

Серьезно, это сродни стилю прокрутки. Не беспокойся

Answer 6

Возможно, вы сможете перенести упомянутую выше кнопку с жидкостью в установку <button type="submit"></button>, заменив окружающие <div> s на button элементы, а <a> s на <span> s.

Answer 7

Мы просто используем CSS, чтобы создавать очень красивые кнопки. Работает в IE6 - 8 и Firefox.

input.blueButton
{
    background-image: url(../Images/blueButton.gif);
    width: 80px;
    height: 21px;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    color: White;
    background-color: Transparent;
    border-style: none;
    cursor: pointer;
    padding-bottom: 1px;
    margin: 0 3px;
}

Answer 8

Вы смотрели на Awesome Buttons?

http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Они довольно крутые, их можно применять к ссылкам или кнопкам и хорошо смотреться во всех браузерах, которые я пробовал (т.е. у 6 есть несколько небольших проблем, но немного CSS просто для них исправляет).

Answer 9

Я верю, что есть <input type="image" src="ButtonBg.jpg" />

http://webdesign.about.com/cs/forms/a/aaformsubmit.htm

Хотя я никогда этим не пользовался.

Answer 10

Проверьте кнопки YUI ... они, кажется, поняли это

http://developer.yahoo.com/yui/examples/button/btn_example01.html