- ベストアンサー
[CSS] focusについて
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
恐らく、JavaScriptを使用すると意図されていることができるようになるかと思います。 <input type="text" onfocus="this.style.background='#000000';" onblur="this.style.background='#ffffff';"> フォームにフォーカス時に色を変え、 フォームからフォーカスが離れたときに色を戻すスクリプトになりますがいかがでしょうか。
その他の回答 (2)
あー一応。僕もまだ読んでないがIE7関連の記事、以前どこかで見つけて忘れてた奴投入しておく。 http://journal.mycom.co.jp/special/2006/ie7beta2/ 但し、この記事は(おそらく記事掲載の時期の関係で)IE7beta2に関するCSSサポートの記事で んでその中によると http://journal.mycom.co.jp/special/2006/ie7beta2/002.html ======================== なお、対応していないセレクタは以下のようになっている。 * A:lang * A:focus * A:before * A:after ======================== というわけで対応してません
IE6は:focus擬似クラスに対応してない模様。 http://hp.vector.co.jp/authors/VA022006/css/corrbrwser/selector.html #IE7は探すのが面倒くさいので勘弁
関連するQ&A
- テキストボックスいくつかのうち１つだけフォーカス
input:focus{background-color:yellow;border-color:red;} はできますが、 テキストボックスいくつかのうち１つだけフォーカス時に色を付ける方法はありますか？ よろしくお願いします。
- ベストアンサー
- CSS
- cssハックでIE9にも対応させるには？
CSSでFirefox,chorme,IEなどブラウザ間で色を統一させたく、 下記のようなcssハックを使いました。 IE6,7,8ではちゃんと反映されましたが、IE9では反映されませんでした。 IE9でも反映させるためには、どのようにしたら良いでしょうか？ <!--[if IE ]> <style type="text/css"> #ie_color {background-color: #777777;} </style> <![endif]-->
- 締切済み
- CSS
- スマホでフォームにフォーカスする方法
スマホでフォームにフォーカスする方法についてです。 ページ読み込み終了時に、 特定の入力フォームに自動でフォーカスしたいのですが、 うまくいきません。 通常、PCのブラウザだと以下のようにするとフォーカスするのですが、 スマホ（iPhone等）では動作しません。 $(document).ready( function() { $("#f1").focus(); }); もしくは、 window.onload=function(){ var elem = document.getElementById("f1"); elem.focus(); } ※f1 は input の id です。 なにか回避策や対処方法はありませんでしょうか？ よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSSで文字サイズを固定
ホームページ作成中です。 ページレイアウトを誰でも同じように見せたいため文字サイズを固定しようと思います。 でも、うまく出来ません。 CSSファイルを別に準備する方法でやっています。 ---------- BODY { color : #666666; font-size: 12px; background-image : url(img/bg.gif); } ---------- こうしてみたのですが、ブラウザで大とか小とかにすると変化してしまいます。 CSSを読み込んでないのかな?と思ってカラーを書き換えてみたのですが、こちらはちゃんと変化します。 何が間違っているのでしょう?
- ベストアンサー
- CSS
- cssで凝った角丸ボックスを作りたい。
以下の条件を満たしたボックスをスタイルシートで作りたいのです。 ●ほぼ全てのブラウザに対応させたい。 ・化石のようなブラウザは結構ですが、 IE、FireFox、ネスケ、Operaには 崩れる事なく表示できるようにしたいです。 ●tableタグを使用したくない。 ・tableを使用せずにこのボックスを実現したいのです。 ●幅や高さは固定ではなく％で指定したい。 ・ブラウザのウィンドウサイズによって変化させたいのです。 ●角を丸く、その外側は透過させたい。 ・(bodyの)バックグラウンドカラーが凝っていて、％で指定したい為、 丸くさせた角の外側を透過させる必要があります。 参照1はかなり近いイメージなのですが、 角丸の外側が透過していません。(bodyのカラーと同じ色にしている) ちなみにこれを透過させると上下のバックグラウンドカラーや 左右の縦にリピートしているバックグラウンドイメージが見えてしまいます。 （参照1）http://www.sovavsiti.cz/css/corners.html ●左から右へとグラデーションをかけたい。 ・希望しているボックスがグラデーションの為、 参照2の黄色の縦線のように太くしたボーダーではできない。 （参照2）http://phrogz.net/CSS/roundcorner.html ●影を付けたい。 ・右下に影を付けたいです。ちなみに角丸・影などの画像は自分で作成できます。 ●画像はcssで表示させたい。 ・角丸やグラデーションなどの画像はhtmlにはimgタグを記述せず、 cssでバックグラウンドカラーなどで表示させたいと思っています。 ※これは変更・妥協可。 ●ボックスの中には文字などが入ります。 調べても考えても糸口が見つかりません。 もしご存知でしたら是非教えて下さい。 よろしくお願いします。
- ベストアンサー
- HTML
- tabキーによるfocusの当たり方を制御したい
こんにちは，よろしくお願いします。 formが設置してあるページで，tabキーを押すとfocusが移動しますが，この挙動が，ブラウザによって違うことに気づきました。 ドリームウィーバーで，レコードの挿入ウィザードを使って簡単にフォームを設置することができますが，たとえば，この単純なページをInternet Explorerで開いて，１回tabキーを押してみると，focusは，ブラウザのアドレスバーに行ってしまいます。しかし，Firefoxでは，フォームの１番目のテキストボックスにfocusが当てられ一番最後にブラウザのアドレスバーなどに行きます。また，OperaではFirefoxと同様にフォームの１番目のテキストから始まって，ブラウザにはfocusが渡りません。 FirefoxやOperaのようにフォームの１番目の項目からfocusがあたるようにしたいのですが，どのようにすればよいのでしょうか？ gooやYahooを上記の３つのブラウザで開いてみると，必ず同じ挙動を示して，同じところからfocusが当たりますから，何らかの方法で制御する方法があるのだと思うのですが…。 tabindexを設定して，フォームの１番目の項目を１として，順に設定してみたりしたのですが，Internet Explorerでは，やはり一番先にブラウザにfocusが渡ってしまいました。 私の希望としては，Opera のように一切ブラウザにfocusが当たらないようにしたいのです。しかし，できないのであれば，Internet Explorerで一番最初にブラウザにfocusが当たらないようにする方法を教えていただきたいです。 当方，JavaScriptとPHPにてホームページを作成中です。よろしくお願いします。
- ベストアンサー
- HTML
- chromeでの擬似クラス:focus について
現在ホームページを作成中です。 cssで擬似クラス「:focus」を使った時の挙動について困っているので質問させて頂きます。 CSSを使って、サイト内でとあるサムネイルをクリックした時に、そのサムネイルの横に大きく画像を表示させようと思っています。 http://c-brains.jp/blog/wsg/08/06/27-210059.php こちらのサイトを参考にして作ったところ、FirefoxやIEでは期待したとおりに動いてくれたのですが、chromeでは残念ながら反応がありませんでした。 そこで何が原因かを調べるために、簡単なところから解決していこうと思い htmlに <a href="#">あいうえお</a> と記載し、cssに a:link { color:black; } a:focus { color:white; background:blue; } と、記載してみた処、リンクをクリックすればFirefoxやIEでは期待したとおりに文字色や背景色が変わりますが、chromeでは反応がありませんでした。 chrome自体が「:focus」に対応してないのかと思い、色んなサイトで調べてみましたが、数年前の記事では対応しているように見えました。（最近の記事は見つかりませんでした） そこで質問です。もしかして、バージョンが上がって、chromeでは「:focus」に対応しなくなったのでしょうか。
- 締切済み
- HTML
- focusについて
<div style="display:none" > <input type="text" name="test" value=""> </div> 上記のような感じでブラウザー上では確認できない形のテキストフィールドでは javascript のfocus() ではフォーカスできない仕様なのでしょうか
- 締切済み
- JavaScript
- 上書きでCSSをデフォルトのブラウザスタイルに戻す
設定済みのCSSを削除、もしくは読み込まない方法ではなく、 上書きによってデフォルトのブラウザスタイルに戻す方法はございますでしょうか。 例えば、リセットで下記を設定しているとします、 input{border:none; background:transparent;} これを上書きによって、なにも設定していない状態に戻す方法はございますでしょうか。 CSS3でも構いません。ちなみに、 input{border:initial; background:initial;} を使ってみましたが、うまくいきませんでした。 よろしくお願いいたします。
- ベストアンサー
- CSS
- IE9でCSS3を適応させると動作がおかしい
よくある普通のチャット(PHP)のデザインを変更して使おうと思っています。 [ 入力欄 ] [発言] [退室] チャットの入室画面でフォームの配置がこのようになっており、 入力欄にメッセージを書いてエンターを押すと送信され下部に表示されます。 大抵どのチャットでもエンターを押すとカーソルは入力フォームにとどまり、 そのまま続けて入力→エンターで発言ができます。 Google ChromeとFirefoxでは問題ないのですが、 IE9のみエンターを押した後に続けて入力することができません。 エンターを押すとなぜかtabキーを押した時と同じような状態になり、 隣の発言ボタンがマーキング？されてしまいます。 なので、エンターを押した後にいちいち入力フォームにマウスを持っていってクリックしないと次が入力できません。 原因を調べてみると、どうもCSS3と関係があるようだということが分かりました。 IE9でCSS3の記述（例えば画像などの角丸やボックス内の背景のみを透過するなど）を使うには、 <meta http-equiv="X-UA-Compatible" content="IE=9" /> 上の記述を<head>内に入れないといけないようなのですが、 これを書いてCSS3を適応させると上記の問題が起こり、 書かない場合はエンターを押して送信した後、そのまま入力フォームにカーソルがとどまってくれます。 どうしても他のページやブラウザと概観を統一したいのでCSS3をIE9にも適応させたいです。 フォームの挙動とCSSは関係ないような気がするんですが、どうしてこういうことが起こるんでしょう？ また、対策などお分かりになる方がいればよろしくお願いします。
- ベストアンサー
- CSS
補足
IEではfocusが未対応だったようですね。 仕方がないのでJAVAスクリプトで何とかしようと考えていただけに、このアドバイスは嬉しかったです。