0

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

我不需要这些东西在各种浏览器中看起来相同。但我希望能够以可预测的方式排列它们。我希望能够在 acheckbox下方放置 atextfield并使其与textfield. 如果这在 . 中有效Safari，则在 . 中无效Firefox：checkbox在textfield. 有时垂直位置可能相差48px或更多。

我在 Apple 上安装了 Opera iMac，在我的 PC 台式电脑上安装Windows XP Pro了 Opera，在 PC 笔记本电脑上安装了Windows 7（在每种情况下，都是最新版本的Opera）。为了定位，checkboxes我必须单独针对每台机器。

Select字段（下拉菜单）让我同样头疼。通常它们在某些浏览器中是可以的，但在其他浏览器中它们最终会出现在 acheckbox或textfield，或者60px向左或向右的顶部。

我真正没有尝试过的一件事是CSS重置，因为 Eric Meyer 说过他不会将它用于表单。有没有其他人尝试过成功？是否有任何可靠的方法来构建具有一般统一样式的表单？我什至不介意识别用户代理并提供特定的CSS. 但是，当相同的浏览器在不同屏幕尺寸的计算机上以不同方式呈现元素时，问题就变得难以解决。

然而显然有一个答案，因为网络上的许多表单似乎都可以跨浏览器工作。谁能帮我一把？

谢谢。

标记

4

4 回答 4

0

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

例如，单选按钮、复选框、选择、输入、文本区域它们都获取操作系统的默认 css 取决于浏览器......

他们不是解决方案，而是使用 jquery 为表单元素制作不同的 UI。就像我目前在Jquery 移动框架上一样，这是针对移动设备和平板电脑的触控优化 Web。他们使用 jquery 和 css3 为表单元素定制了整个 UI，包括 div、span、锚点等。

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

于 2013-06-01T05:27:12.787 回答
0

  • 复选框和单选按钮不能使用它们的标签跨浏览器定位（垂直）。你必须依赖一些专有的或 CSS hack 的东西。
    这并不像看起来那么糟糕：我鄙视使用 CSS hack 进行布局，但在某些浏览器上垂直翻译 1px 的按钮：谁会认真关心另一个浏览器是否被错误地定位并且单选按钮移动了 1px？

  • 您仍然可以自定义这些表单元素的样式。我能找到的最方便的方法在这里：http
    ://www.filamentgroup.com/examples/customInput/ Radio 和 checkbox 隐藏在标签的背景图像下。无论有没有 CSS 和图像，它仍然可以在屏幕阅读器中正常工作。

  • 我不使用 CSS 重置（对我来说太过分了，只是Knacss，它的目的很轻），对于表单，我使用 isellsoap forms.css的出色工作- 所有主要浏览器的一致外观表单。 我试图删除他们 CSS 的每一行，这就是我如何理解现代浏览器在表单方面的表现。金牌归 Chrome，当你明白没有什么能让你设计任何东西，并且从这里你必须从头开始重建所有东西（好吧，isellsoap 做了这么辛苦的工作）。
    -webkit-appearance: none

  • 如果要在同一行上垂直对齐标签和输入[type="text"]，请坚持使用vertical-align: middle. 浏览器和 CSS 会为您处理对齐...top值是您将遇到的每个元素需要不同填充的开始。例如，如果标签出现在两行上，仍然是必要的。

编辑：我从未见过左/右有 48px 或 60px 的错位（除了 IE6/7 上的绝对定位及其错误行为）。您对此以及可以看到它的精确浏览器+操作系统组合是否有兴趣？

于 2013-06-01T08:11:56.007 回答
0

用户代理通常会以不同的方式呈现表单控件，我认为 dom shadow 和 Web 组件 api 将为我们解决这个问题....目前您有大量样式控制跨浏览器的库...但最终所有是formalize.css；它支持 ie6+ 和其他四大浏览器，它还支持五个 js 库，而这些解决方案中有 99% 仅是 jQuery。formize.css 是炸弹。http://formalize.me/

于 2013-06-01T10:39:46.320 回答
0

这是表单字段跨浏览器测试的完整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;
}
于 2013-11-20T10:06:45.143 回答