0

クロスブラウザーで機能するフォーム要素のスタイル設定の戦略を思いついた人はいますか? 私にとって、textfieldsとtextareasは通常問題にはなりませんがcheckboxes、 、radio buttons、およびselects(ドロップダウン) は大混乱を引き起こします。

これらがさまざまなブラウザーで同じように見える必要はありません。しかし、私はそれらを予想通りに並べたいと思っています。checkboxa の下に aを配置textfieldして、 の左端に揃えられるようにしたいと考えていtextfieldます。これが で機能する場合、Safariでは機能しません。場合によっては、垂直方向の配置が異なる場合があります。Firefoxcheckboxtextfield48px

私は Opera を AppleiMacに、PC デスクトップ コンピューターに をWindows XP Pro、PC ラップトップにWindows 7(いずれの場合も の最新バージョンOpera) をインストールしています。を配置するためにcheckboxes、これらの各マシンを個別にターゲットにする必要がありました。

Selectフィールド (ドロップダウン) も同じ頭痛の種です。多くの場合、一部のブラウザでは問題ありませんが、他のブラウザでは、 または の上checkbox、textfieldまたは60px左または右になります。

CSSEric Meyer がフォームには使用しないと言っていたので、私が実際に試していないのはリセットです。他の誰かが成功して試しましたか? 一般的に統一されたスタイルでフォームを作成する信頼できる方法はありますか? ユーザー エージェントを特定し、特定のCSS. しかし、同じブラウザーが異なる画面サイズのコンピューターで要素を異なる方法でレンダリングすると、問題は圧倒的になります。

しかし、Web 上の多くのフォームはクロスブラウザーで動作するように見えるため、明らかに答えがあります。誰か手を貸してくれませんか？

ありがとう。

マーク

4

4 に答える 4

0

ユーザー エージェントは通常、フォーム コントロールを異なる方法でレンダリングします。これは、DOM シャドウと Web コンポーネント API によって修正されると思います....現時点では、クロスブラウザをスタイル コントロールする多数のライブラリがあります...しかし、最終的にはすべてはformalize.cssです。ie6+ およびその他のビッグ 4 ブラウザーをすぐにサポートし、5 つの js ライブラリもサポートしますが、これらのソリューションの 99% は jQuery のみです。Formalize.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 に答える