コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS入力スタイルを変更する方法

CSS入力スタイルを変更する方法

藏色散人
リリース： 2023-01-05 16:09:34
オリジナル
7482 人が閲覧しました

CSS 入力スタイルを変更する方法: 1. 疑似クラス要素を使用してラジオ スタイルを変更します; 2. label を使用して入力をポイントし、ラベル スタイルを変更して効果を実現します。

CSS入力スタイルを変更する方法

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

css は入力ボックスのスタイルを変更します

現在、ブロガーは 2 つの方法しか知りません。他の方法を持っている学生がいる場合は、話し合ってください

1: 使用するラジオ スタイルを変更する疑似クラス要素 (この方法ではラベルを追加する必要がなく、より便利です) 

　.div input[type=radio]::after {
　　　　position: absolute;
　　　　width: 25px;
　　　　height: 25px;
　　　　background: url(../img/inputBG.jpg) no-repeat;
　　　　background-size: 100% 100%;
　　}
ログイン後にコピー

2: ラベルを使用して入力をポイントし、ラベル スタイルを変更することで効果を実現します

　<html>　　
　　　　<input type="checkbox" checked="checked" id="aa"/><label for="aa"></label>
　　</html>
　　<style>
　　　　input[type=checkbox]{
　　　　　　 visibility: hidden;
　　　　}
　　　　label{
　　　　　　width:20px;
　　　　　　height:20px;
　　　　　　border:1px solid #707070;
　　　　}
　　　　input[type=checkbox]:checked + label{
　　　　　　background: url(../img/duigou.jpg)no-repeat;
　　　　　　background-size: 100% 100%;
　　　　}
　　</style>
ログイン後にコピー

[推奨学習:

css ビデオ チュートリアル]

以上がCSS入力スタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css input
前の記事：CSS入力ボックスを編集不可にする方法 次の記事：CSSで最大幅を設定する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
インライン Tailwind CSS とマルチファイル Tailwind CSS の違いは何ですか?
から 1970-01-01 08:00:00
0
0
0
CSS カラー変数 - CSS カラーを定義する場合はルールまたはセレクターが必要です
から 1970-01-01 08:00:00
0
0
0
javascript - webpackパッケージreactjsプロジェクトCSS分離
から 1970-01-01 08:00:00
0
0
0
Sass エラー: ファイルはすでにロードされています: @import '~src/css/quasar.variables.scss', 'quasar/src/css/variables.sass'; src\css\quasar.variables.scss
から 1970-01-01 08:00:00
0
0
0
javascript - 反応して CSS ファイルをインポートし、モジュール "../../css/style.css" が見つかりませんというプロンプトが表示される
から 1970-01-01 08:00:00
0
0
0
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート