Question

有没有人想出一个可以跨浏览器设计表单元素的策略？对我来说，textfields和textareas通常不是问题，但checkboxes，radio buttons和selects（下拉列表）会造成严重破坏。

在各种浏览器中，我不需要这些东西看起来相同。但我希望能够以可预测的方式排列它们。我希望能够将checkbox放在textfield下面并让它与textfield的左边缘对齐。如果这在Safari中有效，则不在Firefox中：checkbox最终低于textfield的中心。有时，垂直展示位置可能会有48px或更多。

我的Apple iMac上的Opera，Windows XP Pro的PC桌面计算机上，以及Windows 7的PC笔记本电脑（每种情况下，{{1}的最新版本}}）。为了定位Opera，我必须单独定位每台机器。

checkboxes字段（下拉列表）给我带来同样的麻烦。通常它们在某些浏览器中都没问题，但在其他浏览器中，它们最终位于Select或checkbox或textfield左侧或右侧。

我真正没有尝试的一件事是60px重置，因为Eric Meyer已经表示他不会将它用于表格。有没有其他人尝试过成功？有没有可靠的方法来构建具有大致统一样式的表单？我甚至不介意识别用户代理并提供特定的CSS。但是，当相同的浏览器在不同屏幕大小的计算机上呈现不同的元素时，问题变得势不可挡。

但显然有一个答案，因为网络上的很多表单似乎都是跨浏览器的。任何人都可以帮我一把吗？

感谢。

标记

Answer 1

在css中自定义表单元素以获得更好的UI的基本思路是不是100％准确，这是因为表单元素样式取决于系统中的操作系统，它嵌入了默认值浏览器操作系统的CSS ...

例如，单选按钮，复选框，选择，输入，textarea 它们都提取OS的默认css取决于浏览器......

他们不是解决方案，而是使用jquery为表单元素创建不同的UI。就像我目前在Jquery mobile框架上一样，这是针对手机和平板电脑的Touch-Optimized Web。他们使用jquery和css3为divs，spans，anchors等自定义了表单元素的整个UI ...

参见： - 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以获得更好看的UI我想说的是什么，只需以此为例来了解问题背后的想法是什么？

Answer 2

复选框和单选按钮无法定位（垂直），其标签为跨浏览器。你依靠一些专有或CSS黑客的东西这并不像它看起来那么糟糕：我鄙视使用CSS hacks进行布局，但是在某些浏览器上垂直翻译1px按钮：谁真正关心另一个浏览器是否被错误地定位并且单选按钮被移动1px？
您仍然可以自定义这些表单元素的样式。我能找到的最容易接近的方式是：http://www.filamentgroup.com/examples/customInput/
收音机和复选框隐藏在标签的背景图像下。无论有没有CSS和图像，它仍然可以在屏幕阅读器中使用。
我没有使用CSS重置（对于我的使用来说是过度使用，只是Knacss这是非常轻松的）而且对于表单我使用isellsoap forms.css - Consistent looking forms across all major browsers的非常好的工作。
我试图删除他们CSS的每一行，这就是我如何理解现代浏览器在表单方面的表现。当你明白除了-webkit-appearance: none以外什么都不会让你设计任何东西以及从那里你可以从头开始重建所有东西（好吧，isellsoap做了那么辛苦的工作）时，金牌会进入Chrome。
如果要在同一行垂直对齐标签和输入[type =＆＃34; text＆＃34;]，请坚持vertical-align: middle。浏览器和CSS将为您处理对齐... top值是您遇到的每个元素需要不同填充的开始。例如，如果标签出现在两行上，则仍然是必要的。

编辑：我从未见过48px错位或左/右60px（除了IE6 / 7上的绝对定位及其错误行为）。你有没有这个小提琴和精确的浏览器+操作系统组合可以看到它？

Answer 3

用户代理通常以不同的方式呈现表单控件，我认为dom shadow和web组件api将为我们修复....目前你有大量的libs样式控制跨浏览器......但是最后一切都是formalize.css;它支持ie6 +和其他四大浏览器，它还支持五个js库，而这些解决方案中有99％只是jQuery。 formalize.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;
}

CSS跨浏览器定位表单元素

4 个答案: