表单元素的CSS跨浏览器定位

Question

有没有人提出一种跨浏览器样式化表单元素的策略？对我来说，textfields 和 textareas 通常不是问题，但是 checkboxes、radio buttons 和 选择(下拉菜单)造成破坏。

我不需要这些东西在各种浏览器中看起来都一样。但我希望能够以可预测的方式排列它们。我希望能够在 textfield 下方放置一个 checkbox 并使其与 textfield 的左边缘对齐。如果这在 Safari 中有效，那么它在 Firefox 中无效:checkbox 在 textfield< 的中心下方结束。有时垂直位置可能相差 48px 或更多。

我在 Apple iMac、装有 Windows XP Pro 的 PC 台式电脑和装有 Windows 7 的 PC 笔记本电脑上安装了 Opera (在每种情况下，都是最新版本的 Opera)。为了定位复选框，我必须单独定位每台机器。

选择 字段(下拉菜单)让我头疼。通常它们在某些浏览器中没问题，但在其他浏览器中它们最终会出现在 checkbox 或 textfield 或 60px 左侧或对。

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

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

谢谢。

标记

Answer 1

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

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

他们不是解决方案，而是使用 jquery 为表单元素制作不同的 UI。就像我目前在 Jquery mobile框架，这是针对手机和平板电脑的 Touch-Optimized Web。他们使用 jquery 和 css3 为带有 div、span、 anchor 等的表单元素定制了整个 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 我想说的是，仅以此为例来了解问题背后的想法是什么？