1

私はこれをウェブサイトで見ました：

ここに画像の説明を入力

次に、それをクリックすると... ここに画像の説明を入力

これをどのように再現しますか？ただの無地の境界線ではなく、そのようなものです。ソースコードをスキャンしましたが、何も見つかりませんでした。css、またはjavascriptにはありません。

これを入手したサイトは次のとおりです。 http://www.minecraft-schematics.com/search/

これは効果があると確信して:focusいますが、私が言ったように、ソースコードでそれを見つけることができませんでした...

何か案は？

4

3 に答える 3

8

参照するページの特定の要素のソースから：

input[type="text"]:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted 9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}

要素を強制的にフォーカス状態にしてから、適用された CSS ルールを検査することで、Chrome を介してこれを取得しました。Chrome Devtools では、インスペクターで任意の DOM 要素を右クリックし、[Force element state] -> [:focus] を選択できます。

補足:見た目から、そのページは人気のある UI フレームワークであるTwitter Bootstrapに基づいて構築されています。

于 2013-04-03T12:23:46.117 に答える
3

ブートストラップの一部のようです。

jsフィドル

.fancy {
    background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border linear .2s,box-shadow linear .2s;
    -moz-transition: border linear .2s,box-shadow linear .2s;
    -o-transition: border linear .2s,box-shadow linear .2s;
    transition: border linear .2s,box-shadow linear .2s;
    display: inline-block;
    height: 20px;
    padding: 4px 6px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.fancy:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted 9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
于 2013-04-03T12:27:33.623 に答える