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

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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

Да, да.

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

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

Серьезно, это похоже на стилизацию полос прокрутки. Не беспокойтесь.

Ответ 6

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

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

  • Добавьте в объявление CSS

    следующее:

    .btn button {   плыть налево;   высота: 40 пикселей;   background: url (images/btn_stretch.png) repeat-x left top;   line-height: 40px;   padding: 0 10px;   цвет: #fff;   font-size: 1em;   text-decoration: none;   border: 0; }

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

    < div class= "btn btn_learnmore" >   <button> Вы должны указать кнопку Try </ >   < & продолжительность GT; </& продолжительность GT; </DIV>

Изменить: также добавить margin: 0 к объявлению css кнопки.

Ответ 7

Вы можете использовать обычную кнопку отправки и использовать JavaScript, чтобы поменять его на симпатичную JS-расширенную кнопку. Таким образом, вы используете только JavaScript, где знаете, что он будет поддерживаться, и вы не оставите пользователей NoScript со сломанной страницей

Ответ 10

Вы взглянули на Awesome Buttons?

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

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

Ответ 11

Мы просто используем 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;
}