SafariでTextareaのボーダーを消す方法

2023/08/07 14:21

このQ&Aのポイント

Safari上でのTextAreaのボーダー消去方法について教えてください。
Windows IE6、IE7、FF2、Mac IE5ではボーダーを消すことができますが、Safariではうまく消すことができません。
Appleのサイトではボーダーが消えているようですが、ソースを見ても理解できませんでした。

ベストアンサー

Safariで、Textareaのボーダーを消したい

2007/09/13 13:03

Safari上で、TextAreaのボーダーを消したいと思い試行錯誤しております。下記HTMLで、Windows　IE6、IE7、FF2、Mac　IE5 でうまくボーダーが消せるのですが、Safariがうまく消せません。お分かりの方、ご教授いただけますでしょうか。 ※Appleのサイトは、Safariでもうまく消せているみたいなのですが、ソースを見ても理解できませんでした。 http://www.apple.com/jp/ ▼HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>test</title> </head> <body> <div style="background:#eeeeee; padding:10px;"> <form action=""> <input type="text" style=" border: 0; width:260px;"> </form> </div> </body> </html>

moon333
お礼率87% (28/32)

CSS
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

mat-21
ベストアンサー率56% (91/162)

2008/01/03 17:36 回答No.3

こんにちは。以下で、私のsafari3.0.4では消えましたよ。 <input type="text" style="border:0px; width:260px;"> CSSのボーダー幅の"px"を忘れていませんか？

その他の回答 (2)

noname#39970

2007/09/13 14:45 回答No.2

残念。safariでは効かない http://www.site-html.com/css_s/css_form_sen.htm アップルのは、上に画像を貼り付けているのでは・・・？

質問者

お礼 2007/09/13 15:40

ご回答、ありがとうございます。 Safariの仕様（バグ？）で効かないという事ですね。 Appleのサイトのソースを見たのですが、 CSSだけでの制御ではない気がしますね。。 jsファイルがいくつかあるので、それらで制御しているのでしょうか？？他、何か情報をお持ちの方、ご教授下さいませ。

aoi0101
ベストアンサー率39% (49/123)

2007/09/13 13:53 回答No.1

ボーダーを消すというのは、最初の見た目ではなく、テキストエリアにカーソルを合わせたときのことでしょうか？

質問者

補足 2007/09/13 14:20

説明不足で申し訳ございません。フォーカス時のライン（ボーダー）ではなく、入力欄自体の枠の事です。お分かりでしたらお願いします。

関連するQ&A

safariでのリキッドデザイン
ウインドウ幅によって横幅可変のページを作ろうとしているのですが、floatを使用して配置したボックスの列の右側がSafariで表示した場合奇麗に揃いません。 Firefoxでは奇麗に揃うのですが、Safariのバグでしょうか？ちなみに下記のようなHTMLとなります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>名称未設定</title> <style type = "text/css">  </style> </head> <body> <div id="wrapper"> <div id="head"> ほげほげ </div> <div id="days"> <div>1<br>月</div> <div>2<br>火</div> <div>3<br>水</div> <div>4<br>木</div> <div>5<br>金</div> </div> </div> </body> </html> ほげほげのボックスの右側と、floatで並べたボックスの右側が揃いません。Safariのバージョンは4.0.4です。エクセルのような表を作ろうと思っているのですが、横幅固定だと一つ一つのボックスが狭くなってしまうので、大きなディスプレイでは広く表示できるようにしたいのです。なにか対処法をご存知な方、ご助力いただけると幸いです。よろしくお願いいたします。
- 締切済み
- HTML
iPadのSafariでサイトが右側にはみ出る
いつもご丁寧な回答をありがとうございます。 iPad2を利用しています。　通常、iPadやiPhoneのSafariでは、ウェブサイトの横幅が、機種によって最適化され、ちょうど良い解像度になります（横スクロールする必要がない）。　しかし、私が自作しているサイトでは、なぜか右側がはみ出てしまい、すべて表示させるには、フリックしたり、ピンチインする必要が生じます。　簡略したコードは次の通りですが、何が問題でしょうか。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> </head> <body style="background-image : url(cg/interface/hoge.gif);background-repeat : repeat-x;margin-top : 0px;margin-bottom : 0px;margin-left: 12px;margin-right : 12px;"> <div style="width:1200px;border:1px solid;">左右にマージンが空いて欲しい</div> </body> </html> div要素のwidth指定が大きすぎることが原因でしょうか。しかし、通常はそれでも最適化（縮小）されると思うのです。ご回答、どうぞよろしくお願いいたします。
- 締切済み
- CSS
Firefoxのみborderが消える現象
お世話になっております。以下のソースのように、ページを左カラムと右カラムに分けて上から下までカラムをheight:100%にしているます。右カラムの左にボーダーをドットで入れているのですが、IEでは表示されるborderがFirefoxでは表示されません。解決方法をご教授お願いいたします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <title>サンプル</title> <style type="text/css">  </style> </head> <body> <div id="wrapper"> <div id="left"> aaa </div> <div id="right"> aaa </div> </div> </body> </html>
- 締切済み
- HTML
スタイルシートの表示結果の違い（IEとNetscape)
スタイルシートを使ってボックスのレイアウトをしています。IE6.0ではうまくいきますがNetscape7.1では崩れてしまいます。どのようにソースを修正したらいいでしょうか教えて下さい。 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>質問用のページ</title> <style type="text/css">  </style> </head> <body> <div class="left"> ボックス１</div> <div class="center"> メインのボックス<br> IE6.0では「ボックス１」が左に配置され「メインのボックス」は右側に配置されます。<br> <br> しかしFireFox1.0やNetscape7.1では上から下へボックスが並んでしまいレイアウトが崩れてしまいます。<br> <br> </div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
Firefoxで、tableに指定したmargin-leftがスクロールバーで×（ソース記載にて長文です）
HTMLにて質問してましたが、回答ありませんでしたので、カテゴリを変えて質問させていただきます。 bodyをmargin、paddingともに0にして、tableを配置してmargin-left:15pxを指定したのですが、スクロールバーが出た時にFireFox2.0でずれます（他、IE6、safari3は問題無）。どうも、marginがきかなくなるようですが、原因がお分かりになれば教えていただけないでしょうか？また、回避策は何かあるでしょうか？ divに設定したmarginは問題無です。 tableをdivで括って、marginはdivに設定すれば問題ありません。でも、できればシンプルにbodyの直下にtable配置したいと思っているのですが…。どうぞよろしくお願いします！以下にサンプルソースを記述します↓ ------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テーブル</title> <style>  </style> </head> <body> <div style="width:500px; background-color:#00FF00; margin-left:14px;">div</div> <table width="500" border="0" cellspacing="0" cellpadding="0" style="margin-left:14px;"> <tr> <td bgcolor="#0099FF">テーブル</td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
Safariで画像が出ません！
WinXPにてHPを作っています。 WinではIE7、IE6、NN7、FireFox、Opera MacではIE、FireFox、Opera、Safari で動作・レイアウトの確認をしています。何故かSafariのみ、以下のタグを入れたページの背景画像が出ず真っ白な画面になってしまいます。どこに間違いがあるのかさっぱりわからないんです… ご存知の方、教えて頂けるとありがたいです！！宜しくお願い致します。タグ一覧↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <BASE target="_parent"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Imagetoolbar" content="no"> <meta name="robots" content="noindex, nofollow,noarchive"> <meta name="GOOGLEBOT" content="NOINDEX, NOFOLLOW, NOARCHIVE"> <TITLE>top</TITLE> <STYLE type="text/css">  </STYLE> </HEAD> </HTML>
- 締切済み
- CSS
fixedで作ったフロートメニューを中央に配置するには
浮かせたaをbの位置に表示させたいのですが、aは左上に固定されてしまいます。 IE7では上手くいくのですが、FF3では思うように行きません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>TEST</title> <style> html,body{margin:0;padding:0;width:100%;height:100%;} </style> </head> <body> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #AAAAFF;color:#AAAAFF;position:fixed;">a</div> <div style="max-width:780px;width:100%;margin:0px auto;text-align:center;border:solid 1px #FFAAAA;color:#FFAAAA;">b</div> </body> </html>
- 締切済み
- HTML
枠線でメイン部分を囲み、フッターを一番下にもってくるには？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css">  </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>
- ベストアンサー
- HTML
センタリングされた外枠を表示させたい
IEでのブラウザ表示でセンタリンクされた幅900px高さ700pxの枠を表示させたいのですが、うまくいきません。どのようにすれば枠がセンタリングされるでしょうか？ご教授よろしくお願い致します。・HTML 部分 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <link rel="stylesheet" href="index.css" type="text/css"> <title>新しいページ 1</title> </head> <body> <div class="page"></div> </body> </html> ・css 部分 .page { border: solid 1px #000000; width: 900px; height: 700px; }
- ベストアンサー
- HTML
IE6 で余分な border が表示されてしまいます。
CSS と XHTML で FAQ を作っているのですが、IE6 で表示した場合に余分な border が入ってしまいます。 FireFox ではきちんと表示されます。 IE7 では確認していません。ソースは以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css">  </style> </head> <body> <div class="qa"> <div class="qa_left"> Ｑ：<br /> Ａ： </div> <div class="qa_right"> 　質問です。<br /> 　答えです。 </div> <div class="clear"> </div> <div class="qa_left"> Ｑ：<br /> Ａ： </div> <div class="qa_right"> 　質問です。<br /> 　答えです。 </div> </div> </body></html> 何か方法はありますでしょうか？よろしくお願いします。
- 締切済み
- CSS

SafariでTextareaのボーダーを消す方法

Safariで、Textareaのボーダーを消したい

質問者が選んだベストアンサー