0

この種のPinterestを登録フォームに反映させたいのですが、ユーザーが入力テキストフィールドまたはテキスト領域に焦点を合わせたときに、このフィールドまたは領域の周囲に次のようにソフトシャドウを付けたいと思います。

ここに画像の説明を入力してください

だから私は次のことを試しました-私はCSSクラスを書きました

.inputShadow{
box-shadow:0 0 10px 5px #900;
}

そして、onFocus = "addShadow（）"で追加しようとしました。ここで、これはaddShadow（）関数でした。

function addShadow(){
    $(this).addClass("inputShadow");
}

でも影は出ませんでした。それから私はこれを試しました：

$(function(){
    $("input").onfocus("addClass","inputShadow");
});

また、結果なし。最後に私はこれを試しました：

$(function(){
    $("input").onfocus("css","box-shadow:0 0 10px 5px #900;");
});

しかし、それも私を助けませんでした。

それを機能させる方法はありますか？ありがとう！

4

3 に答える 3

3

このタスクにjQueryを使用する必要はありません。cssのみを使用することもできます。

input:focus {
  /* Your shadow css here */
  -moz-box-shadow:0 0 10px 5px #900;
  -webkit-box-shadow:0 0 10px 5px #900;
  box-shadow:0 0 10px 5px #900;
}

ただし、creminsnは正しいです。ボックスシャドウはすべてのブラウザで機能するとは限らないため、ブラウザ固有のプレフィックスを追加する必要があります。

于 2012-04-14T10:12:54.310 に答える
1

mozillaブラウザとchromeブラウザには異なるcssルールがあるため、どのブラウザを使用していますか。

例えば

.inputShadow {
    -moz-box-shadow:0 0 10px 5px #900;
    -webkit-box-shadow:0 0 10px 5px #900;
    box-shadow:0 0 10px 5px #900;
}
于 2012-04-14T10:07:56.483 に答える
1

テストはしていませんが、これでうまくいくはずです。

$(function(){
   $("input").on("focus",function(){
       $(this).addClass(".inputShadow");
   });
});

編集：他の回答で述べられているように、ブラウザの互換性も確認してください

于 2012-04-14T10:08:23.700 に答える