JavaScript >> Javascript チュートリアル >  >> Tags >> CSS

簡単なヒント:疑似セレクターを使用してフォーム要素をスタイルする

CSS が発明されて以来、世界中の Web 開発者は、組み込みのブラウザー コントロールのスタイルを設定する方法を望んでいました。これは、ボタンやテキスト入力などの単純な要素では簡単ですが、select などのより複雑な要素では困難です。 と range .この簡単なヒントでは、その方法を紹介します。

疑似セレクターを使用する理由

組み込みのブラウザー要素の外観をカスタマイズするための標準的な方法はまだありません。たとえば、検索入力には、検索をキャンセルするために押すことができる小さな "x" 魔女が表示されます。これは内部的に別の要素として実装されていますが、通常の CSS では到達できません。ブラウザー メーカーは注意を払い、使用できるベンダー固有のセレクターを追加しました。その「x」の場合、使用するセレクターは input[type=search]::-webkit-search-cancel-button です .

ここには、既知のセレクターの膨大なリストがあります。すべてのブラウザーは、組み込み要素をカスタマイズするためのいくつかのセレクターを提供しますが、悪いニュースは、サポートがいたるところにあることです。将来的には、この混乱に一貫性をもたらす標準が存在することを願っています。ただし、現時点では、各ブラウザを個別にターゲットにする必要があります。

Google Chrome を使用している場合は、使用するセレクターを簡単に見つける方法があります。 Shadow DOM サポートを有効にすると、組み込みのブラウザー要素の内部構造を確認できます。これを行う方法は、Chrome DevTools のヒントとコツの記事から抜粋したものです:

開発者ツールを開き、[設定] に移動します。そこで、全般で 、要素の下 ユーザー エージェントのシャドウ DOM を表示するにチェックを入れます。 要素を調べると、#shadow-root が表示されます。 #shadow-root で要素を選択すると、[スタイル] タブで、ユーザー エージェント スタイルシートがそれらのスタイルを設定するために使用するセレクターが表示されます。ほとんどの場合、これが探しているセレクターです。

以下の実験のほとんどは、Chrome と Safari でのみ機能することに注意してください。 Firefox と IE は、組み込み要素のカスタマイズに必要な疑似セレクターの多くをサポートしていないため、通常のバージョンを表示します。いつの日か標準が整備されれば、このようなカスタマイズはどこでも機能するようになります.

1.チェックボックス

幅と高さを指定する以外に、CSS のチェックボックスでできることはあまりありません。ただし、Chrome と Safari は :before をサポートしています と :after 入力の疑似要素なので、楽しむことができます。チェック マークはすべて CSS で作成されており、フェード イン トランジションでアニメーション化されていることに注意してください。

-webkit-appearance を設定することにより none まで 、デフォルトのブラウザー スタイルが適用されないようにすることで、カスタム CSS への扉を開いたままにします。また、em のおかげで 単位、親のフォントサイズでチェックボックスのスケールを作成しました。増やしてみてください。

body {
    font: 13px sans-serif;
    color:#444;
}

label {
    padding: 10px;
    display: block;
}

input[type=checkbox].styled {
    -webkit-appearance: none;
    height: 1em;
    position: relative;
    background-color: #276FF4;
    width: 1em;
    border-radius: 3px;
    outline: none;
    font-size: 16px;
    /* try this: */
    /* font-size: 36px; */
    vertical-align: middle;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

input[type=checkbox].styled:active {
    box-shadow: 0 0 0.8em rgba(0, 0, 0, 0.2) inset;
}

input[type=checkbox].styled:before,
input[type=checkbox].styled:after {
    content: '';
    background-color: inherit;
    position: absolute;
    transition: 0.1s background-color;
}

input[type=checkbox].styled:after {
    width: 0.19em;
    height: 0.65em;
    -webkit-transform: rotate(36deg) translate(0.52em, -0.16em);
}

input[type=checkbox].styled:before {
    width: 0.2em;
    height: 0.4em;
    -webkit-transform: rotate(-58deg) translate(-0.2em, 0.48em);
}

/* We use the checked selector to make the pseudo elements visible */

input[type=checkbox].styled:checked:after,
input[type=checkbox].styled:checked:before {
    background-color: #fff;
}
<label>
    <input type="checkbox" /> Regular Checkbox
</label>

<label>
    <input type="checkbox" class="styled" />
    Styled Checkbox
</label>

2.ラジオ ボタン

ラジオボタンにも同じテクニックを使用できます。ここでは、CSS からチェック マークを作成する必要がないため、より簡単です。これは引き続き Chrome と Safari でのみ機能します。他のブラウザでは通常のラジオ ボタンが表示されます。

body {
    font: 13px sans-serif;
    color:#444;
}

label {
    padding: 10px;
    display: block;
}

input[type=radio].styled {
    -webkit-appearance: none;
    height: 1em;
    position: relative;
    background-color: #276FF4;
    width: 1em;
    border-radius: 50%;
    outline: none;
    font-size: 14px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

input[type=radio].styled:checked:before {
    content: '';
    height: 0.4em;
    width: 0.4em;
    background-color: #FFF;
    position: absolute;
    border-radius: 50%;
    top: 0.3em;
    left: 0.3em;
}
<label>
    <input type="radio" name="test" /> Regular Radio
</label>

<label>
    <input type="radio" class="styled" name="test" /> Styled Radio
</label>

3.要素を選択

select 要素は、CSS でスタイルを設定するのが難しいことで有名です。今日でも、私たちが変えられることは限られています。下向き矢印をカスタマイズするには、背景画像と少しのパディングを使用できます。ドロップダウン リストでは、option 要素のフォント サイズと背景を指定できますが、それ以上のことはできません。

body {
    font: 13px sans-serif;
    color:#444;
}

label {
    padding: 10px;
    display: block;
}

select.styled {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    border: 1px solid #aaa;
    padding: 2px 15px 2px 5px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAICAQAAACxSAwfAAAAUklEQVQY02P4z0AMRGZGMaShwCisyhITmb8huMzfEhOxKvuvsGAh208Ik+3ngoX/FbBbClcIUcSAw21QhXxfIIrwKAMpfNsEUYRXGVCEFc6CQwBqq4CCCtU4VgAAAABJRU5ErkJggg==), linear-gradient(#EDEDED, #EDEDED 38%, #DEDEDE);
    background-position: right center;
    background-repeat: no-repeat;
    border-radius: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    color: #333;
}

/* Required to disable the default IE styles */
select.styled::-ms-expand {
    display: none;
}

select.styled:hover {
    border-color: #909090;
}

/* You have limited control on the drop down list. Uncomment this: */
/* select.styled option{
    background-color:green;
    color:#fff;
    font-size:20px;
} */
<label>
    <select>
        <option>Cheeze</option>
        <option>Bacon</option>
        <option>Pasta</option>
        <option>Pizza</option>
        <option>Ice Cream</option>
    </select> Regular Select
</label>

<label>
    <select class="styled">
        <option>Cheeze</option>
        <option>Bacon</option>
        <option>Pasta</option>
        <option>Pizza</option>
        <option>Ice Cream</option>
    </select> Styled Select
</label>

4.範囲要素

範囲は、ブラウザーでサポートされている新しいフォーム要素の 1 つです。また、最もカスタマイズ可能なものの1つです。 Chrome、Safari、および Firefox はすべて、要素の特定の部分をスタイルするために使用できる多数の CSS 疑似セレクターを提供します。この例では実装していませんが、IE でもサポートされているものがあります。利用可能なものについては、このリストを参照してください。

body {
    font: 13px sans-serif;
    color:#444;
}

label {
    padding: 10px;
    display: block;
}

input[type=range].styled {
    -webkit-appearance: none;
    outline: 0;
    width: 300px;
    transition: 0.2s;
}

/* Chrome */

input[type=range].styled::-webkit-slider-runnable-track {
    height: 2px;
    background: #9DA0A6;
    border: none;
    border-radius: 3px;
}

input[type=range].styled::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #FFF;
    margin-top: -7px;
    vertical-align: middle;
    border: 5px solid #276FF4;
    transition: 0.15s;
}

input[type=range].styled::-webkit-slider-thumb:active {
    height: 20px;
    width: 20px;
    margin-top: -9px;
}

/* Firefox */

input[type=range].styled::-moz-range-track {
    height: 2px;
    background: #9DA0A6;
    border: none;
    border-radius: 3px;
}

input[type=range].styled::-moz-range-progress {
    background: #276FF4;
}

input[type=range].styled::-moz-range-thumb {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #FFF;
    margin-top: -7px;
    vertical-align: middle;
    border: 5px solid #276FF4;
    transition: 0.15s;
    box-sizing: border-box;
}

input[type=range].styled::-moz-range-thumb:active {
    height: 20px;
    width: 20px;
    margin-top: -9px;
}

input[type=range].styled::-moz-focus-outer {
    border: 0;
}
<label>
    <input type="range" /> Regular Range
</label>

<label>
    <input type="range" class="styled" /> Styled Range
</label>

5.プログレスバー

また、progress 要素により、多くのカスタマイズが可能になります。このような単純な要素の場合でも、2 つの div を簡単にネストして独自のバージョンを作成できます。

body {
    font: 13px sans-serif;
    color:#444;
}

label {
    padding: 10px;
    display: block;
}

progress.styled {
    margin-top: 15px;
    width: 200px;
    height: 12px;
    background-color: #ddd;
    border: none;
}

/* Chrome */

progress.styled::-webkit-progress-bar {
    background-color: #ddd;
}

progress.styled::-webkit-progress-value {
    background-color: #266FF4;
}

/* Firefox */

progress.styled::-moz-progress-bar {
    background-color: #266FF4;
}
<label>
    <progress value="22" max="100"></progress> Regular Progress
</label>

<label>
    <progress value="22" max="100" class="styled"></progress> Styled Progress
</label>

結論

組み込みのブラウザー コントロールを最終的に変更できるようになったことは素晴らしいことですが、標準化に関してはまだ長い道のりがあります。ここでは、Google Chrome が明らかにリーダーです。Chrome アプリや拡張機能を作成する場合は、ここで示したすべてのものを使用できます。しかし、一貫したクロスブラウザー サポートが必要な場合は、JavaScript ライブラリと Chosen などの jQuery プラグインを利用するのが最善の解決策です。


  1. ドキュメントの視覚化:JavaScript array.flatMap

  2. React のベスト プラクティス

  3. React Redux スターター