4

フォーカスがあるときはいつでも入力フィールドを囲むセクシーな輝きを知っていますか？

あまり詳しく説明せずに、入力フィールドの外でその効果を再現する必要がありますが、そのような効果を指示するスタイルシートはどこにも見つからないようです。

（outlineプロパティなどを使用して、その方法を知っています。入力テキストフィールドにデフォルトで使用される正確な値を見つける方法があるかどうか疑問に思っています。）

4

6 に答える 6

5

chromeには、デフォルトで入力のアウトラインスタイルがあります。多くのプロジェクトでそのルールを無効にする必要があります。

Chromeデベロッパーツールを使用して、ブラウザのスタイルルールを確認します。

ここでこれを行う方法を参照してください：

Chrome開発者ツール情報

于 2012-06-20T02:36:48.753 に答える
4

CSSを介してこれを行うことが可能です。TwitterBootstrapFormsとその方法をご覧ください。入力フィールド内をクリックします。

ここで簡単な作業例を参照してください：http：//jsbin.com/esidas/2/edit#html,live

box-shadowとのCSS3プロパティを使用して行われますtransition

input[type=text] {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  -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 0.2s, box-shadow linear 0.2s;
     -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
      -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
       -o-transition: border linear 0.2s, box-shadow linear 0.2s;
          transition: border linear 0.2s, box-shadow linear 0.2s;
}

input[type=text]:focus {
  border-color: rgba(82, 168, 236, 0.8);
  outline: 0;
  outline: thin dotted \9;
  /* IE6-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);
}
于 2012-06-20T02:42:21.653 に答える
2

私が知っている最高のクロスブラウザ/クロスプラットフォームはformalizeです。

特定のレンダリングがどのように機能するか (つまり、Safari Mac 上で) を理解しようとしている場合は、ユーザー エージェント cssを探すことになります。最新のブラウザーでは、レンダリング ライフサイクル全体が完全にパラメーター化されており、ベンダー固有のプレフィックスに大きく依存しており、 Chromeや FF+Firebug などの検査ツールで表示できます。

FF+ファイアーバグ勝利

于 2012-06-20T04:55:27.417 に答える
0

それはあなたのブラウザがあなたのために自動的にそれをしているのです。そのため、そのスタイルシートを見つけることができません。

于 2012-06-20T01:28:16.700 に答える
0

これはブラウザの効果であり、スタイルからの効果ではないため、手動で行う必要があります。その際、ブラウザごとに動作が異なることに注意してください（クライアントOSにも依存すると思います）。したがって、実際には、クライアント環境を事前に知っている場合にのみ一致させることができます（閉じたネットワークで可能）。

于 2012-06-20T02:40:39.873 に答える
0

これは Web ブラウザーによって追加され、使用しているブラウザーと OS に依存するため、正確なコードを表示することはできません。正確なスタイルを見つける方法は難しくないかもしれません。入力フィールドで「要素を調べる」オプションを試してみてください。ブラウザによって「計算されたスタイル」が表示される場合があります。それ以外の場合は、どの OS でどのブラウザを使用しているかを正確に教えていただければ、お手伝いできます。

于 2012-06-20T02:52:43.540 に答える