HTML 5 обязательное сообщение обрезается

Question

В настоящее время я перевожу сайт на HTML 5 и использую преимущества новых типов и атрибутов input - использую JavaScript в качестве запасного варианта, когда тип или атрибут не реализован.Моя проблема заключается в том, что когда требуемое сообщение запускается в FireFox, сообщение обрезается из-за того, что оно перекрывает границу содержащего div, как показано ниже:

Демонстрация: http://jsfiddle.net/f8b7D/2/

Есть ли способ активировать отображение сообщения для смещения, чтобы использовать пространство, доступное дальше слева, где оно не будет обрезано?Я знаю, что окно сообщения нельзя выбрать с помощью CSS, и я предпочел бы не полагаться на решение JS, поскольку у нас есть ряд пользователей, у которых отключен JavaScript.

Дополнительная информация:

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

В Opera оно отображается правильно.

IE не поддерживает обязательный атрибут.

Answer 1

Исправлено в Firefox 29 - по-видимому, из-за неработающего кода 2002 года, который был удален, как только кто-то обратил на него внимание https://bugzilla.mozilla.org/show_bug.cgi?id=647813

Answer 2

После некоторой дальнейшей игры я обнаружил, что ширина окна сообщения равна ширине элемента select.Установив min-width из select в ширину окна сообщения (230 пикселей), можно предотвратить обрезку.

select{min-width: 230px;}

Это решение, безусловно, взломано и должно использоваться только в том случае, если ваш сайтстиль не будет разрушен широкими select элементами.Если у вас есть только options с краткими текстовыми значениями, например, Yes, No, Maybe, тогда требуемая ширина выбора может выглядеть необычно, поэтому используйте это решение только с осторожностью.

К сожалению, это никак не влияет на внешний вид в Chrome.

Answer 3

Я нашел решение этой проблемы с сообщениями об ошибках формы html5. Это вызвано шириной, используемой в нашем CSS для элемента select. При увеличении ширины всплывающее сообщение об ошибке также увеличивается по ширине. Это также только влияет на Firefox.

Так что я обернул 'select' в промежуток и дал ему относительную позицию. Затем я дал селекту более широкую ширину (для размещения сообщения об ошибке), но затем также дал ему отрицательное левое поле. Вам нужно будет поиграть с собственной шириной в пикселях для вашей ситуации, но это решило проблему. Я избежал использования значения по умолчанию для первой опции, но я предполагаю, что вы можете использовать выравнивание текста прямо на элементах опции.

Это решение затем создает другую проблему! Красный контур, который Firefox использует для своих недопустимых состояний, обведет всю «скрытую» область выделения, которая выглядит странно и отличается от других элементов, поэтому ответом было просто отключить границы, но я использовал css для действительного и недействительного состояния просто добавить фоновый значок (галочка / крестик), чтобы указать, когда поля формы были действительными / недействительными. Я также использовал x: -moz-any-link в моей CSS, чтобы отфильтровать эти стили только для Firefox и других браузеров. Вот мой css ...

/* start styles for Firefox clipping of validation msgs */
form fieldset > span, x:-moz-any-link {position: relative; }
form select, x:-moz-any-link {width: 230px; margin-left: -82px; }
form select option, x:-moz-any-link {width: 220px; margin-right: -20px; text-align: center; }
form input, form select, x:-moz-any-link {border: solid 1px transparent; box-shadow: none; }
form input:-moz-placeholder, form select:-moz-placeholder, x:-moz-any-link {box-shadow: none !important; }
form input:invalid, form select:invalid, x:-moz-any-link {box-shadow:0 0 3px transparent; }
 /* end styles for Firefox clipping of validation msgs */

input:valid {background: #fff url("forms-check.png") no-repeat 130px center; }
input:focus:invalid {background: #fff url("forms-cancel.png") no-repeat 130px center; }

Все намного проще, чем я это сделал ?! Надеюсь, что это полезно.

Answer 4

Боюсь, что нет способа (и, возможно, никогда не будет) для стилизации пузыря сообщений для HTML5.Боюсь, что Javascript - ваш лучший выбор.Вот некоторый контекст.

HTML5 Обязательный стиль ввода