0

アンカーとして実装されたカスタム ボタンがあります。ボタンには画像とテキストがあります。

ボタンにフォーカスがあるときは、別のスタイルにしたいと思います。具体的には、画像とテキストの周りに点線の長方形を描きたいと思います。また、別のクラスに基づいてスタイルを追加したいと思います。

ボタンのコードは次のとおりです。

<a id="searchButton" class="button" href="#">
    <span class="icon-search"></span>
    Search
</a>

これが私の質問を含むCSSコードです。

button:focus {
/*How do I make a rectangular dotted line around the button text and icon? /*
/* How do I refer to another class that has additional stylings? */
}
4

2 に答える 2

3

「ボタン」がありますが、タグはボタンではなくクラスであるため、代わりに「.button」にする必要があります。

.button:focus {
  outline: #00FF00 dotted thick;
}

「追加のスタイリングを持つ別のクラスを参照するにはどうすればよいですか?」という質問に関しては、SASS、LESS、またはその他の動的スタイルシート言語などのライブラリが必要になると思います。そのようなタイプの機能は、現在 CSS によってネイティブにサポートされていないためです。 .

于 2012-11-19T21:22:17.613 に答える
0

.次のように、先頭にドット ( )を付けてクラスを参照します。

.button { /* styles go here */ }

で目的の効果を達成できますoutline: 1px dotted gray;

.button:focus {
     outline: 1px dotted gray;
}
于 2012-11-19T21:40:37.317 に答える