ホームページ > ウェブフロントエンド > フロントエンドQ&A > 入力でCSSスタイルを変更できますか?

入力でCSSスタイルを変更できますか?

藏色散人
リリース: 2023-01-04 09:38:17
オリジナル
1897 人が閲覧しました

入力は CSS スタイルを変更できます。CSS スタイルを変更する方法は次のとおりです: 1. 疑似クラス要素を使用してラジオ スタイルを変更します; 2. ラベルを使用して入力をポイントし、ラベル スタイルを変更します効果を達成するために。

入力でCSSスタイルを変更できますか?

このチュートリアルの動作環境: Dell G3 コンピューター、Windows 7 システム、HTML5&&CSS3 バージョン。

推奨: 「css ビデオ チュートリアル

入力ボックスのデフォルトの CSS スタイルを変更する方法:

入力でCSSスタイルを変更できますか?

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スタイルを変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート