純粋なCSSでデジタルプラスとマイナスボタンを実装するための最適なソリューション

序文：

デジタル加算ボタンと減算ボタンの実装には、次のような多くのソリューションがこれまでに使用されてきました。

1. 背景画像を使用する - 効果は高くなりますが、スタイルの制御が少し複雑で、画像が必要になるという欠点があります。

2. 「+」と「-」を直接使用する - この方法はシンプルで大まかですが、実装が最も簡単です。欠点は、ブラウザ環境によって表示が若干異なり、シンボルのサイズと線の太さを調整するのが容易ではないことです。

3. Unicode 文字を使用します。これは方法 2 とほぼ同じ問題がありますが、互換性が悪く、一部の携帯電話では文字を表示できませんでした。

4. CSS スタイルとタグを使用して絶対位置の水平線と垂直線を生成し、それらの位置を調整してプラス記号を形成します。欠点は、ブラウザによって水平と垂直の組み合わせがわずかにずれる可能性があることです。これは、タグを使用して 2 つの同一の水平線と垂直線を生成し、そのうちの 1 つを 90 度回転することで解決でき、より効果的なものになります。

上記の中で一番良いのは、写真を使った最初の方法です。少し面倒ですが、効果は一番高く、互換性も気にする必要がありません。他の方法はお勧めしません。

最近、CSS3 のbackground-imageスタイルを使用し、線形グラデーションlinear-gradientと組み合わせてプラス記号を合成するという新しい方法を発見しました。具体的な実装は次のとおりです。

キーコード:

<a href="javascript:" class="btn btn_plus" role="button" title="追加"></a>
<input class="inputNum" 値="1" サイズ="1">
<a href="javascript:" class="btn btn_minus" role="button" title="減らす"></a>
.入力番号{
    垂直位置合わせ: 中央;
    高さ: 22px;
    境界線: 1px 実線 #d0d0d0;
    テキスト配置: 中央;
}
.btn{
    表示: インラインブロック;
    垂直位置合わせ: 中央;
    背景: #f0f0f0 繰り返しなし 中央;
    境界線: 1px 実線 #d0d0d0;
    幅: 24px;
    高さ: 24px;
    境界線の半径: 2px;
    ボックスの影: 0 1px rgba(100, 100, 100, .1);
    色: #666;
    トランジション: color .2s、background-color .2s;
}
.btn:アクティブ{
    ボックスシャドウ: インセット 0 1px rgba(100, 100, 100, .1);
}
.btn:ホバー{
    背景色: #e9e9e9;
    色: #333;
}
.btn_plus {
    背景画像: 線形グラデーション(上へ、現在の色、現在の色)、線形グラデーション(上へ、現在の色、現在の色);
    背景サイズ: 10px 2px、2px 10px;
}
.btn_minus {
    背景画像: 線形グラデーション(上へ、現在の色、現在の色);
    背景サイズ: 10px 2px;
}

その中で、キーとなるスタイルは、末尾の太字の両端です。この方法は互換性が良いことが検証されており、h5/css3の互換性と同じと言えます。

これは私が今まで見た中で最もシンプルな実装方法です。この使い方を考えた人を尊敬します。

要約する

上記は、エディターが紹介した純粋な CSS でデジタル加算および減算ボタンを実装するための最善のソリューションです。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。
この記事が役に立ったと思われた方は、ぜひ転載していただき、出典を明記してください。ありがとうございます!