CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

フォーム入力フィールドで活用できる、あまり知られていないCSSプロパティ3選

CSSには、フォームやテキスト入力に関連する便利でありながら、意外と知られていないプロパティがいくつか存在します。その代表例が caret-color、pointer-events、tab-size の3つです。

  • caret-color: テキスト入力時に点滅するキャレット(テキストカーソル)の色を自由に指定できます。
  • pointer-events: 要素へのマウス操作を無効化し、ユーザーがその要素をクリックしたり選択したりできないようにできます。
  • tab-size: タブ文字によって挿入される空白(ホワイトスペース)の幅を設定します。

以下に、これらのプロパティを使用した具体的なコード例を紹介します。

例1:pointer-events と tab-size の使用

<!DOCTYPE html>
<html>
<head>
<style>
body {
    display: flex;
    flex-direction: column;
    background-color: mistyrose;
}
p {
    white-space: pre;
}
p:last-of-type {
    tab-size: 32;
    -moz-tab-size: 32;
    pointer-events: none;
}
</style>
</head>
<body>
<p> Ut sed felis lobortis, fermentum magna vitae, imperdiet lectus.</p>
<p> Ut sed felis lobortis, <a href=#>fermentum magna vitae</a>, imperdiet lectus.</p>
</body>
</html>

出力結果

上記のコードは、次のように表示されます −

フォーム入力フィールドで活用できる、あまり知られていないCSSプロパティ3選

この例では、最後の段落に pointer-events: none; が適用されているため、段落内のリンクをクリックできなくなります。また、tab-size: 32; によりタブ文字の幅が32文字分に拡張されます。

例2:caret-color の使用

<!DOCTYPE html>
<html>
<head>
<style>
form {
    padding: 2%;
    margin: 3%;
    background-color: cadetblue;
    text-align: center;
}
form:focus-within {
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
input {
    caret-color: navy;
    font-size: 40px;
    font-weight: large;
}
</style>
</head>
<body>
<form>
<select>
<option>.</option>
<option>..</option>
<option>...</option>
</select>
<input type="text" value="glee" />
</form>
</body>
</html>

出力結果

上記のコードは、次のように表示されます −

フォーム入力フィールドで活用できる、あまり知られていないCSSプロパティ3選

この例では、caret-color: navy; を指定することで、テキスト入力欄内で点滅するキャレットがネイビー色で表示されます。さらに :focus-within 疑似クラスと組み合わせることで、フォーム内のいずれかの要素にフォーカスが当たった際にボックスシャドウを表示する演出も実現しています。


  1. 2020年版Webデザイン必見！最新のCSSプロパティとAPI徹底解説

    JavaScriptとCSSを組み合わせてWebサイトを柔軟にカスタマイズできるよう、開発者向けに新しいCSSプロパティが多数登場し、主要ブラウザでもサポートされるようになりました。本記事では、2020年のWebデザインで注目すべき最新CSSプロパティとAPIをご紹介します。 押さえておきたい最新CSSプロパティ :focus-within 要素内のフォーカスに関するアクセシビリティ問題を解決するためのセレクタです。子要素がフォーカスを受け取った際に、親要素へスタイルを適用できます。 scroll-snap ネイティブなスクロールと減速（慣性スクロール）を実現します。カルーセルやスライド

  2. CSSの新機能：text-decorationプロパティでテキスト装飾と下線を自由にデザインする方法

    text-decoration関連の各プロパティが登場したことで、これまで以上に柔軟にテキストの装飾や下線をコントロールできるようになりました。 text-decorationは、text-decoration-thickness（線の太さ）、text-decoration-color（線の色）、text-decoration-line（線の種類）、text-decoration-style（線のスタイル）をまとめて指定できるショートハンド（一括指定）プロパティです。一方、text-decoration-skip、text-decoration-skip-ink、text-underline-