• 締切済み

フォームボタンの白い枠の消し方。

今晩和。現在、ブログの色などのデザイン変更をしております。 現在、スタイルシートを変更していて、フォームボタンの内側に白い線?のようなものが表示され、気になっています。 フォームボタンは背景が透けて見えるように変更しました。 input{ color:#666666; border:1px dotted #8a8a8a; background-color:transparent; } .button{ color:#666666; border:1px dotted #8a8a8a; background-color:transparent; } テキストのところはちゃんと表示されているのですが、フォームボタンのみ内側に白い枠が表示されています。 以前、HPを作ったことがありますので、試しに枠が表示されないように変更してみたら、ドット枠と一緒に白い枠も消えました。 自分なりにいろいろ調べてみましたが、解決策は見つかりませんでした。 背景画像に写真を使用しているので、重なると目立つので、出来れば白い枠を消したいと思っています。 解決方法をご存知の方がいらっしゃいましたら、ご教授の程宜しく御願い致します。

みんなの回答

noname#39970
noname#39970
回答No.1

とりあえずブラウザが何かを書いた方がいいよ(細かいversion込みで) じゃないと再現できるかも確認もできないし

noname#32530
質問者

補足

早速の御回答有難う御座います。 また、情報が不足していまして、申し訳ありません。 ブラウザはIE6を使っています。他では確認していません。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • submitボタンの周りにつく枠

    スタイルシートで、submitボタンを下記のようにしています。 background-color: transparent; border: 1 dotted #FFAABA; テーブルの中にフォームをおいています。 テーブルに背景色をつけると、submitボタンの周りに細い枠はつかないのですが、テーブルに背景画像をつけると、submitボタンのドットの周りに細い枠がどうしてもついてしまいます。 これを消す方法は何かあるでしょうか? 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • セレクトメニューボタンの枠の色の変更の仕方を教えて下さい。

    セレクトメニューボタンの枠の色の変更の仕方を教えて下さい。 <HEAD>と</HEAD>の間に <style type=text/css> <!-- input,select,textarea { filter:Alpha(opacity=数字,enabled=数字); font-size:文字サイズpt; color:#文字の色; font-family:'文字の種類'; background-color:#背景色; border-top:1px solid #fe97b3; border-bottom:1px solid #fe97b3; border-left:1px solid #fe97b3; border-right:1px solid #fe97b3; } --></STYLE> と入れてます。 <input>の枠の色は変わりますが、<select>のみが変わりません。 どこが悪いのでしょうか

  • CSSでテーブルのセルが、a:hover で背景を変わるようにしましたが、枠がちらついてしまいます。

    テーブルのセルに、リンクのあるテキストをはって、 a:hoverで背景が変わるようにしたのですが、 hoverの状態でセルの外側だけ背景が変わらずに、hover状態でないときの背景がほんの少しちらついてしまいます。 table .a{border: 0px;background-color:red;;padding: 2px;width: 150px;} table .a a:hover{border:0px;padding: 2px;width: 150px;background-color:orange;} のようにすると、 hover状態で、セルの枠が、ほんの少しredのままになってしまいます。 http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/ の 3.BOX の例のように、hover状態できれいに背景の色が変わるようにしたいんですが、どう直せばいいでしょうか。よろしくおねがいいたします。

    • ベストアンサー
    • HTML
  • テーブル枠の初歩的なことで教えてください

    CSSでテーブルを作成した時の事で二つ質問おねがいします 1. #box { width:800px; height:100px; border: 1px solid #000000; } とした時の大きさについて ボーダーを含めた大きさが800pxで内側の領域が798pxなのか ボーダーの内側が800pxでボーダーを含めて802pxなのか 2. #left{ width:200px; height:80px; float:left; background-color:#FFFFFF; border: 1px solid #000000; } #right{ width:600px; height:80px; float:right; background-color:#FFFFFF;   border: 1px solid #000000; } 質問1の中に質問2の物を入れようとすると4px?分飛び出してしまうということでしょうか? それともボーダー同士は重なり合い同じ大きさになるのでしょうか? よろしくお願いします

  • css:リンク画像の枠消し: a img { border:none} にしてもダメ

    リンク画像に、【テキストリンクと同じスタイル】つまりリンクの背景色や枠線が適用されてしまい、困っています。 下のように、entry-bodyというクラスの a を打ち消す a img のスタイルを指定しているのですが…。(色番号は長くなるので#だけにしています)a:visited img や a:hover img も同様に指定しています。また、.entry-body img には、他のスタイル指定をしていません。 どなたかお分かりになったら助けてください! .entry-body a { color:#; background-color:#; border-bottom:1px #;} .entry-body a img { background-color:transparent; border-bottom:none;}

    • ベストアンサー
    • HTML
  • フォームをリセットボタンのボタンの周りの余白を消したい!

    <BUTTON type="reset" style="border-style : none; background-color: #FFFFFF;"> <IMG src="image.gif" value="リセット"></BUTTON> ※リセットボタンを画像にして背景を白、ボーダをなしにして画像のみ表示したボタンにした。 上記に記述した内容でフォームのリセットボタンを作ったのですが 画像の周りに変な余白が出るのですがその余白を消す方法ってなにかありますか? わかる方いましたら、教えてください。

    • ベストアンサー
    • HTML
  • CSS アンカーの画像の回りが色枠で囲まれてしまう

    <a>タグでリンクボタン(画像)を作りました。 ソースはこんな画像とURLを指定したのみです。 <a href="http://xxxxx/"><img src="/image/menu01.gif"></a> ブラウザで見ると、画像の周りが青枠で囲まれてしまっています。 (一度、クリックすると赤っぽい色に、その枠の色が変わります) 既存のページを元にHTMLを作成しているのですが、たぶん、定義して ある CSS or javascript などの設定ファイルが悪さをしているような気がしていますが、何が原因か分かりません。 そのHTMLに指定してあるCSSをコピペさせていただきますが、どこが原因か分かりますか? そのほか、怪しいところがありましたら、ご指摘ください。 よろしくお願いいたします。 ----style.css--- body { background-color: #ffffff; background-repeat: no-repeat; font-family: Arial, Verdana; font-size: 14px; font-style: normal; font-weight: normal; /* color: #333333; */ /* margin-top: 10px; */ /* margin-left: 10px; */ /* margin-right: 10px; */ /* margin-bottom: 10px; */ } /* Style for in-page header of the generated rowset pages */ .pagehead { font-size: 16px; font-weight: bold; } /* Table row style referenced in generated various generated pages */ .tablebody { /* background-color: #CCDDEE; */ color: #111111; font-size: 14px; text-align: left; vertical-align: middle; padding: 5px 10px 5px 10px; } /* Default grid header and footer style for generated rowset pages */ .gridStyle-tr-header, .gridStyle-tr-footer { background-color: #CCDDEE; color: #555588; font-size: 14px; text-align: left; vertical-align: baseline; line-height: 18px; border-color: #999999; border-style: solid; border-width: 1px; padding-left: 10px; } /* Grid base row default style for generated rowset pages */ .gridStyle-tr-data { background-color: #FFFFFF; color: #111111; font-size: 14px; text-align: left; border-color: #999999; border-style: solid; border-width: 1px; padding-left: 12px; } /* Grid alternate row default style for generated rowset pages */ .gridStyle-tr-alt-data { background-color: #CCDDEE; color: #111111; font-size: 14px; text-align: left; border-color: #999999; border-style: solid; border-width: 1px; padding-left: 12px; } /* Used for prompts in generated pages */ .prompt { color: #993333; font-style: italic; } A:link, A:visited, A:active { color: #7777AA; text-decoration: underline; } A:hover { color: #9999FF; background: transparent; text-decoration: underline; } ----common.css--- body { color:#111; background-color:#777; margin:0; } form { margin:0; } a { color:#111; } a:hover, a.Hover { color:#666; } a.My { color:#25a; } a.My:hover, a.MyHover { color:#58d; }

    • ベストアンサー
    • HTML
  • CSSでのレイアウトについて

    CSSやHTMLのテンプレートをカスタマイズ中です。 分からないことだらけですが構成としては BODYと#maincontで分かれていまして、 画面中央に四角いコンテンツ。 サイドに背景画像が表示されるようにしたいです。 BODY部分に背景画像のbackground指示を入れると 画面一面中央コンテンツ上にも背景画像が表示されてしまいます。 画像がかぶっている中央コンテンツの文章や 外枠は画像の上から表示されて読めます。 一枚構成になっているような状態だと思うのです。 枠外背景にのみ画像を表示する方法を教えてください。 画像なしの状態では閲覧に問題はないです。 下記CSSを一部抜粋します。 どなたかご親切な方。 分かりやすくお願いします。 BODY{ font-size:~~; font-family:~~~; color:#~~~; border-top:5px #000000; solid; background-image: url(~~~);  background-repeat: repeat; } #maincont{ width:600px; margin:auto;  padding:30px border-left:3px #~~~ dotted; border-right:3px #~~~ dotted; }

  • cssのボタンについて(IEで背景が表示されない)

    リンク先を表示するためにcssでボタンを以下のように作製しました。 FireFoxでは正常にきちんと表示されるものの、 IE10で確認したところ、IEでは背景色が表示されませんでした。 そこでzoom: 1;などを足すなどしてみたのですが やはり表示されません。どうしたらいいのかご指南いただけませんか? どうかよろしくお願いいたします。 a.btn { position: relative; background: -moz-linear-gradient(top,#0099CC 0%,#006699); background: -webkit-gradient(linear, left top, left bottom, from(#0099CC), to(#006699)); border: 2px solid #FFF; color: #FFF; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); -webkit-box-shadow: 1px 1px 1px rgba(000,000,000,0.3); text-shadow: 0px 0px 3px rgba(0,0,0,0.5); padding: 10px 10px; margin: 4px 2px 4px 2px; }

    • ベストアンサー
    • CSS
  • ピクセル表示をパーセント表示にするには?

    ピクセル表示をパーセント表示にするには? style.cssで下のような記述をしています。 これをパーセント表示に切り替えたいのですが、 WIDTH: 640px;を WIDTH: "100%"に変更する他に、 どこを変更すればよいのでしょうか? 上の変更だけでは、パーセント表示に切り替わりません。 よろしくおねがいします。 -----ここから BODY { BACKGROUND-COLOR: #000000 } TABLE { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 5px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 640px; PADDING-TOP: 0px; BACKGROUND-COLOR: #ffffff; BORDER-RIGHT-WIDTH: 0px } DIV.veryimportant { FONT-SIZE: large; BACKGROUND: #7375ce; COLOR: #ffffff } A:hover { FONT-WEIGHT: bold; COLOR: #f00ca0 }

    • ベストアンサー
    • HTML