6

疑似セレクターと疑似要素を組み合わせて、カスタムツールチップを作成しようとしています。

私のHTML：

<input id='test'/>

私のCSS：

#test {
    position: relative;
}

#test:focus {
    background-color: #08c;
}

#test:focus:before {
    position: absolute;
    left: 100%;
    width: 10px;
    height: 10px;
    background-color: black;
}

コードを実行しているフィドル：http：//jsfiddle.net/9ujEH/

現在、＃test：focusの結果としてフォーカスされると、入力は青に変わりますが、＃test：focus：beforeから思ったように、黒い正方形は表示されません。

4

5 に答える 5

4

疑似要素は、コンテナ要素でのみ定義できます。コンテナ自体の中でDOM要素としてレンダリングされる方法のためです。入力に他の要素を含めることはできないため、サポートされていません。一方、ボタンはフォーム要素ですが、他のサブ要素のコンテナであるため、それらをサポートします。

2.1仕様の詳細

::afterおよび::before疑似要素は、疑似クラス（明らかにを使用）との混同を避けるために二重コロンを使用していますが:、古いバージョンのIE（7,8）は二重コロンを認識しません。それらをサポートしようとしています。

于 2013-03-15T16:15:46.670 に答える
4

inputのように、要素は無効/置換された要素であり、話す「コンテンツ」がないため、これは機能しませんimg。したがって、要素内に疑似要素を挿入する場所がないようです。

divたとえば、を使用すると、次のような複数の疑似セレクターを使用できます。

div:hover::before {
    /* CSS */
}

JSFiddleの概念実証。

参照：

于 2013-03-15T16:15:51.433 に答える
3

:focus-withinCSS疑似クラスを使用することで、実行しようとしていることを実現できます。

input図のように、要素を<div>（または任意のコンテナ要素）でラップするだけです。

<style>
    #test {
        position: relative;
    }

    #test:focus {
        background-color: #08c;
    }

    #mydiv:focus-within::after {
        content: "Careful! This field is case-sensitive!";
    }
</style>

<div id='mydiv'>
    <input id='test' />
</div>

関連している：

于 2019-02-18T15:54:46.863 に答える
2

：after＆：beforeは、置換された要素で機能していません。 ＆は置換された要素です。input

このhttp://reference.sitepoint.com/css/replacedelementsを確認してください

于 2013-03-15T16:15:35.160 に答える
0

が必要ない場合はplaceholder、ここに簡単なクロスブラウザオプションがあります。IEでも動作します。 jsfiddle

さらに、必要に応じてスタイルを設定できます。

i[data-hint]::after      {
  /* position: absolute; */
  display: inline-block;
  content: attr(data-hint);
  vertical-align: middle;
  font-style: normal;
  width: 0;
  white-space: nowrap;
  overflow: hidden;
  opacity: 0;
  transition: 0.45s ease-out;
}

input:focus + i[data-hint]::after {
  width: auto;
  opacity: 1;
  margin-left: 10px;
}
<input /><i data-hint="Here my hint for input.."></i>

于 2022-02-14T17:00:31.723 に答える