CSS-перекрестное позиционирование элементов формы

Question

Кто-нибудь придумал стратегию стилизации элементов формы, которая работает кросс-браузер? Для меня textfields и textareas обычно не представляют проблемы, но checkboxes, radio buttons и selects (выпадающие списки) создают хаос.

Мне не нужны эти вещи, чтобы они выглядели одинаково в разных браузерах. Но я бы хотел, чтобы они могли выстроить их заранее. Я хотел бы иметь возможность поставить checkbox ниже textfield и выстроить его с левым краем textfield. Если это работает в Safari, то это не в Firefox: там checkbox заканчивается ниже центра textfield. Иногда вертикальное размещение может отличаться на 48px или больше.

У меня есть опера на моем Apple, iMac, на моем ПК настольного компьютера с Windows XP Pro, и на ноутбуке ПК с Windows 7 (в каждом случае, новейшая версия Opera). Чтобы разместить checkboxes, мне приходилось индивидуально ориентировать каждую из этих машин.

Select поля (выпадающие списки) дают мне те же головные боли. Часто они в порядке в некоторых браузерах, но на других они заканчиваются сверху checkbox или textfield, или 60px слева или справа.

Единственная вещь, которую я действительно не пробовал, - CSS сброс, так как Эрик Мейер сказал, что он не использует его для форм. Кто-нибудь еще пробовал это с успехом? Есть ли какой-либо надежный способ создания формы с общими единообразными стилями? Я даже не возражаю против идентификации пользовательского агента и доставки конкретных CSS. Но когда одни и те же браузеры визуализируют элементы по-разному на компьютерах различного размера экрана, проблема становится подавляющей.

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

Спасибо.

Марк

Answer 1

Основная идея для настройки элементов формы для лучшего пользовательского интерфейса это не 100% точный в CSS, это потому, что элементы формы укладки зависит от операционной системы в системе, она встраивает по умолчанию CSS ОС для браузера ...

например, кнопка радио, checkboxs, выбирает, вход, текстовое поле все они выбирают по умолчанию CSS ОС зависит от браузера ...

их это не решение, а мак с другим пользовательским интерфейсом для элемента формы с jquery. Как и я в настоящее время на основе Jquery mobile, это Touch-Optimized Web для мобильных устройств и планшетов. Они настроили весь пользовательский интерфейс для элемента формы с divs, spans, anchors и т. Д. С jquery и css3 ...

См: - http://view.jquerymobile.com/1.3.1/demos/widgets/forms/

формы структуры в HTML: -

<fieldset data-role="controlgroup"> 
    <legend>Radio buttons, vertical controlgroup:</legend> 
     <input name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" type="radio"> 
     <label for="radio-choice-1">Cat</label> 
     <input name="radio-choice-1" id="radio-choice-2" value="choice-2" type="radio"> 
     <label for="radio-choice-2">Dog</label> 
     <input name="radio-choice-1" id="radio-choice-3" value="choice-3" type="radio"> 
     <label for="radio-choice-3">Hamster</label> 
     <input name="radio-choice-1" id="radio-choice-4" value="choice-4" type="radio"> 
     <label for="radio-choice-4">Lizard</label> 
</fieldset> 

Форма структура, показывающая в браузере: -

<div class="ui-controlgroup-controls"> 
    <div class="ui-radio"> 
    <input type="radio" checked="checked" value="choice-1" id="radio-choice-1" name="radio-choice-1"> 
    <label for="radio-choice-1" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-on" data-theme="c" data-mini="false" class="ui-radio-on ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-first-child ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Cat</span><span class="ui-icon ui-icon-radio-on ui-icon-shadow">&nbsp;</span></span></label> 
    </div> 
    <div class="ui-radio"> 
    <input type="radio" value="choice-2" id="radio-choice-2" name="radio-choice-1"> 
    <label for="radio-choice-2" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-off" data-theme="c" data-mini="false" class="ui-radio-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Dog</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow">&nbsp;</span></span></label> 
    </div> 
    <div class="ui-radio"> 
    <input type="radio" value="choice-3" id="radio-choice-3" name="radio-choice-1"> 
    <label for="radio-choice-3" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-off" data-theme="c" data-mini="false" class="ui-radio-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Hamster</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow">&nbsp;</span></span></label> 
    </div> 
    <div class="ui-radio"> 
    <input type="radio" value="choice-4" id="radio-choice-4" name="radio-choice-1"> 
    <label for="radio-choice-4" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="radio-off" data-theme="c" data-mini="false" class="ui-radio-off ui-btn ui-btn-corner-all ui-fullsize ui-btn-icon-left ui-last-child ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">Lizard</span><span class="ui-icon ui-icon-radio-off ui-icon-shadow">&nbsp;</span></span></label> 
    </div> 
</div> 

Изменение пользовательского интерфейса с помощью JQuery и CSS3 для более перспективных UI, что я пытаюсь сказать, просто возьмите это как пример, чтобы понять, какова идея этой проблемы?

Answer 2

• Чекбокс и радио кнопки не могут быть расположены (вертикально) с их этикеток кросс-браузера. Вы должны полагаться на некоторые проприетарные или CSS-хаки.
  Это не так плохо, как могло показаться: я презираю использование CSS-хаков для макета, но для перевода 1px по вертикали кнопки в каком-то браузере: кто серьезно заботится о том, что другой браузер ошибочно настроен, а радио-переключатель перемещен 1px?

• Вы по-прежнему можете настраивать стиль этих элементов формы. Самый доступный способ, который я мог найти, находится здесь: http://www.filamentgroup.com/examples/customInput/
  Радио и флажок скрыты под фоновым изображением ярлыков. С или без CSS и изображений он по-прежнему работает, как и в устройствах для чтения с экрана.

• Я не использую CSS сброса (избыточна для моего использования, просто Knacss, который очень легкий по назначению) и формы я использую очень хорошую работу isellsoap forms.css - Consistent looking forms across all major browsers.
  Я попытался удалить каждую строчку своего CSS, и именно так я понял, как современные браузеры, когда дело доходит до форм. Золотая медаль отправляется в Chrome, когда вы понимаете, что ничего, кроме -webkit-appearance: none, позволит вам что-то стилизовать, и отсюда вам нужно все восстановить с нуля (ну, isellsoap сделал эту тяжелую работу).

• Если вы хотите выровнять по вертикали в одной строке этикетку и ввод [type = "text"], тогда придерживайтесь vertical-align: middle. Браузер и CSS позаботятся о выравниваниях для вас ... top Значение - это начало необходимости различного дополнения для каждого элемента, с которым вы столкнетесь. Еще необходимо, если метка идет, например, на две строки.

EDIT: Я никогда не видел 48px-адресу или 60px на левый/правый (кроме как с абсолютным позиционированием на IE6/7 и его поведение багги). У вас есть сценарий для этого и точное сочетание браузера и ОС, где его можно увидеть?

Answer 3

Пользовательские агенты обычно визуализуют элементы управления формами по-разному, что-то, что я думаю, что dom shadow и веб-компоненты api будут исправлены для нас .... на данный момент у вас есть множество библиотек, которые управляют элементами кросс-браузера ... но конец все формализуется. css; он поддерживает ie6 + и другие большие 4 браузера из коробки, а также поддерживает пять js libs, тогда как 99% этих решений - только jQuery. formize.css - это бомба. http://formalize.me/

Answer 4

здесь полный CSS для полой формы тестирования кросса-браузера

form, fieldset, legend { 
    margin:0; 
    padding:0; 
    border:none; 
    line-height:normal; 
}  
input[type="checkbox"] { 
    -moz-appearance: checkbox; -webkit-appearance: checkbox; 
    margin-left:3px; border:0; 
    vertical-align: middle;  
    top: -1px;bottom: 1px; 
    *overflow: hidden;} 
input[type="radio"] { -moz-appearance: radio; -webkit-appearance: radio; } 
input[type="search"] { 
    -webkit-appearance: textfield; 
} 
input, button, textarea, select { 
    font-family: inherit; 
    font-size: inherit; 
    color:#000000; 
    font-size: 100%; /* for IE */ 
    padding:6px; 
    margin:5px 0; 
    border-radius:4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    *border-radius:4px; 
    -border-radius:4px; 
    border-radius:4px/8; 
    -ms-border-radius: 4px; 
    background:#fff;   
    text-transform:capitalize; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; 
    -moz-appearance: none; -webkit-appearance: none;*/ 
} 
input[type="submit"], input[type="reset"] { 

    color:#fff; font-weight:bold; 
    vertical-align:middle; 
} 
input[type="submit"]:hover, input[type="reset"]:hover { 
     cursor:pointer; 
} 
button, input[type="submit"], input[type="image"], 
label > input[type="checkbox"] { 
    box-sizing: border-box; /* 1 */ 
    *height: 13px; /* Removes excess padding in IE 7 */ 
    *width: 13px; 
    backgorund: #fff; 
} 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
textarea:focus, select:focus { outline:0; 
} 
input::-moz-focus-inner, button::-moz-focus-inner { border: 0; padding: 0; } 
textarea {  
    resize:none; 
    overflow: auto; /* Removes default vertical scrollbar in IE 6/7/8/9 */ 
    vertical-align: top; /* Improves readability and alignment in all browsers */ 
} 

/* placeholder and tooltip styles */ 
*::-webkit-input-placeholder, /* WebKit browsers */ 
*:-moz-placeholder, /* Mozilla Firefox 4 to 18 */ 
*::-moz-placeholder, /* Mozilla Firefox 19+ */ 
*:-ms-input-placeholder /* Internet Explorer 10+ */ { 
color: #999; 
} 

[placeholder]:focus::-webkit-input-placeholder, 
[placeholder]:focus:-moz-placeholder { color:transparent; } 


/* mantatory field styles */ 
::-webkit-validation-bubble-message { 
    padding: 1em; 
}