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

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

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

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

  • Так как это использует ссылки вместо реального ввода HTML или элементов кнопки, нажимание кнопки не отправляет форму. Это легко разрешено с помощью JavaScript, но это было бы идеально, если бы работы кнопки отправки без JavaScript включили.
  • Другая проблема - то, что удар [ВХОДИТ], не отправляет форму. Грязный взлом должен включать невидимый входной элемент типа, "отправляют" или "отображают".

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

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

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

10
задан Fer 15 January 2010 в 13:04
поделиться

11 ответов

Проверьте кнопки YUI ... они, кажется, фигурируют это

http://devampper.yahoo.com/yui/example/button/btn_example01.html

0
ответ дан 3 December 2019 в 22:37
поделиться

Вы взглянули на потрясающие кнопки?

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

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

0
ответ дан 3 December 2019 в 22:37
поделиться

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

Нет, вы могли бы использовать JavaScript, как остальные из нас. Загрузите в свою стандартную форму (в комплекте с кнопочной кнопкой), а затем используйте аккуратно написанный JavaScript для динамической «исправить» некоторые из уродливых элементов. Я бы предложил оценить платформу JQuery Framework для этого типа, если вы хотите использовать Clean Code и получить поддержку кросс-браузера.

7
ответ дан 3 December 2019 в 22:37
поделиться

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

3
ответ дан 3 December 2019 в 22:37
поделиться

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

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

Тогда я видел этот вход в блоге:

не пойдет на это. Просто придерживайтесь <Тип кнопки = «Отправить»> или <Входной тип = «Отправить»> с хорошим выстрелом CSS. Вы даже можете использовать фоновые изображения CSS на этих кнопках. Я бы не схватил JavaScript для проблем с макетом, потому что это может вызвать «WTF?» Опыт во время нагрузки страницы, когда пользователь мгновенно видит частей страницы быстро меняться. Просто используйте CSS Smart Way.

2
ответ дан 3 December 2019 в 22:37
поделиться

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

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

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

    .BTN кнопка { плыть налево; Высота: 40px; Фон: URL (Images / btn_stretch.png) repeat-x левый верх; Высота линии: 40px; прокладки: 0 10px; Цвет: #fff; Размер шрифта: 1ЕМ; Текстовое украшение: нет; Граница: 0; }

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

    <Кнопка> Вы должны попробовать

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

1
ответ дан 3 December 2019 в 22:37
поделиться

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

0
ответ дан 3 December 2019 в 22:37
поделиться

Мы просто используем 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;
}
0
ответ дан 3 December 2019 в 22:37
поделиться

Я верю, что есть <тип ввода = «Image» SRC = "Buttonbg.jpg" / >>

http://webdesign.about.com/cs/ Формы / a / aaformsubmit.htm

Я никогда не использовал это, хотя.

0
ответ дан 3 December 2019 в 22:37
поделиться

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

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

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

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

1
ответ дан 3 December 2019 в 22:37
поделиться