2017-01-18 5 views
0

私は正常に動作している2つのチェックボックスを得たが、私はいくつかのCSSの問題に直面します。チェックボックスを標準フォーマットで使用するにはどうしたらいいですか?

私はGoogleのクロム55.0.2883.87とMicrosoftエッジ38.14393.0.0の1に(一つのMozillaでFirefoxの50.1.0、1を見ているかの3枚のスクリーンショットを作りました):

のFirefox:

enter image description here

クローム:

enter image description here

エッジ:

enter image description here

完全なHTMLは(何のクラスを持っていない)body要素の内側にあります。 <html>タグは、これらのクラスを持っているが、私にはありません関連性があるとお考えください:

js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths 

HTML:

<div class="container"> 
    <form> 
     <span data-bind="visible: $data"> 
      <fieldset class="well"> 
       <div class="row form-group"> 
        <div class="col-md-1 vcenter">@Html.CheckBoxFor(..., new {@class = "form-control pull-left", @data_bind = "checked: HasNoCodeBarreUnique"})</div> 
        <div class="col-md-11 vcenter">@Html.LabelFor(..., new {@class = "control-label"})</div> 
       </div> 

       <div class="row form-group"> 
        <div class="col-md-1 vcenter">@Html.CheckBoxFor(..., new {@class = "form-control pull-left", @data_bind = "checked: IsInSystemeRemboursementReference" })</div> 
        <div class="col-md-11 vcenter">@Html.LabelFor(..., new {@class = "control-label"})</div> 
       </div> 
      </fieldset> 
     </span> 
    </form> 
</div> 

私は、C#のmodelプロパティとirrelevantsクラスのどちらかを意図的に省略しました。私はちょうどのような標準的なチェックボックスたい

.vcenter { 
    float: none; 
    display: inline-block; 
    vertical-align: middle; 
    margin-right: -4px; 
} 

すべてのクラスがさえずりブートストラップ-3からですが、のvCenter

enter image description here

を、どのように標準形式で私のチェックボックスをレンダリングします?

+0

。あなたがそれぞれのスタイルを一貫して持たせたい場合は、そのスタイルを作成する必要があります。 – Craicerjack

+0

私は各ブラウザに独自のレンダリングスタイルがあることを知っていますが、この場合はデフォルトの動作ではありません。なぜか –

+0

"カスタムチェックボックス"を検索すると、独自のチェックボックスをカスタマイズする方法がたくさんあります。これは、ブラウザ間で標準化する唯一の方法です。 – pshep123

答えて

3

あなたはこのような何か(formbaseからスタイル - すべての近代的なブラウザとIE11 +)で始めることができ、各ブラウザは、基本的なHTML要素をレンダリングするための独自のスタイルを持ってい

body { 
 
    padding: .9rem; 
 
} 
 
label { 
 
    font-size: .85rem; 
 
} 
 
.control { 
 
    margin: 0 0 .9rem; 
 
    box-sizing: border-box 
 
} 
 
.control__input { 
 
    position: absolute; 
 
    opacity: 0; 
 
    pointer-events: none 
 
} 
 
.control__label { 
 
    display: block; 
 
    position: relative; 
 
    padding-left: calc(20px + .6rem); 
 
    will-change: transform 
 
} 
 
.control__label::before { 
 
    border: 1px solid transparent 
 
} 
 
.control__label::after, 
 
.control__label::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: calc(50% - 10px); 
 
    left: 0; 
 
    width: 20px; 
 
    height: 20px 
 
} 
 
.control__label::after { 
 
    border: 1px solid transparent 
 
} 
 
.control__label::before { 
 
    border-color: #bbb; 
 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05); 
 
    background: #fff; 
 
    background-size: 0 
 
} 
 
.control__label::after { 
 
    background-size: 60%; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    transform: scale(0); 
 
    transition: transform .3s ease; 
 
    will-change: transform 
 
} 
 
.control__input[type=radio]+.control__label::before { 
 
    border-radius: 100% 
 
} 
 
.control__input[type=radio]+.control__label::after { 
 
    background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M256%2C464c114.9%2C0%2C208-93.1%2C208-208c0-114.9-93.1-208-208-208C141.1%2C48%2C48%2C141.1%2C48%2C256C48%2C370.9%2C141.1%2C464%2C256%2C464z%22/%3E%3C/svg%3E) 
 
} 
 
.control__input[type=checkbox]+.control__label::after { 
 
    background-image: url(data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22512%22%20height%3D%22512%22%20viewBox%3D%220%200%20512%20512%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M461.6%2C109.6l-54.9-43.3c-1.7-1.4-3.8-2.4-6.2-2.4c-2.4%2C0-4.6%2C1-6.3%2C2.5L194.5%2C323c0%2C0-78.5-75.5-80.7-77.7c-2.2-2.2-5.1-5.9-9.5-5.9c-4.4%2C0-6.4%2C3.1-8.7%2C5.4c-1.7%2C1.8-29.7%2C31.2-43.5%2C45.8c-0.8%2C0.9-1.3%2C1.4-2%2C2.1c-1.2%2C1.7-2%2C3.6-2%2C5.7c0%2C2.2%2C0.8%2C4%2C2%2C5.7l2.8%2C2.6c0%2C0%2C139.3%2C133.8%2C141.6%2C136.1c2.3%2C2.3%2C5.1%2C5.2%2C9.2%2C5.2c4%2C0%2C7.3-4.3%2C9.2-6.2L462%2C121.8c1.2-1.7%2C2-3.6%2C2-5.8C464%2C113.5%2C463%2C111.4%2C461.6%2C109.6z%22/%3E%3C/svg%3E) 
 
} 
 
.control__input[type=checkbox][disabled]+.control__label, 
 
.control__input[type=radio][disabled]+.control__label { 
 
    cursor: not-allowed 
 
} 
 
.control__input[type=checkbox][disabled]+.control__label::before, 
 
.control__input[type=radio][disabled]+.control__label::before { 
 
    border-color: #c8c8c8; 
 
    background-color: #f2f2f2; 
 
    box-shadow: none 
 
} 
 
.control__input:checked+.control__label::after { 
 
    transform: scale(1) 
 
}
<div class="control"> 
 
    <input class="control__input" id="checkbox" type="checkbox"> 
 
    <label class="control__label" for="checkbox">Checkbox</label> 
 
</div> 
 
<div class="control"> 
 
    <input class="control__input" id="Radio" type="radio"> 
 
    <label class="control__label" for="Radio">Radio</label> 
 
</div>

0

上記のCraicerjackが述べたように、さまざまなブラウザでは、チェックボックス(および他のフォーム要素)がそれぞれのスタイルでレンダリングされます。あなたはそれらをすべて同じものに見せて、CSSだけでブラウザをクロスさせるのに苦労します。あなたのためにこれを行ういくつかの良いJavaScript/jQueryスクリプトがあります。これはかなり古いですhttps://github.com/IonDen/ion.checkRadioしかし、私はさまざまなプロジェクトでそれを正常に使用しました。

+0

'あなたはすべて同じものを見て、CSSだけでブラウザをクロスさせるのに苦労します。私はこれに同意できません - あなたはIE 7世代のブラウザのサポートが必要な場合を除き、あなたはCSSでしかできません – Morpheus

+0

闘争は常に無駄なベンチャーではありません:)過去には、それらを正しく見せてくれる悪夢が幾分ありましたChrome、IE、Firefox、Opera、Safari、iOS、Androidブラウザなどがあります。私はオーバーヘッドを吸い上げてスクリプトを使うだけです。 – DrakeRamoray

関連する問題