• 締切済み

フォームのCSSを解除したい

<form action="test.php" method="post"> <input type="radio" name="aiueo"> <input type="submit" value="送信"> </form> 上記のフォームに *{ border:0px; margin:0px; padding:0px; } というCSSを指定すると、初期のデザインでなくなってしまいます。 上記CSSをいじらない(アスタリスクは必要な為)で、 追加で初期のデザインに変更するには どのように記述するべきでしょうか。 ご存知の方いましたらご教授をお願いいたします。

  • HTML
  • 回答数2
  • ありがとう数2

みんなの回答

noname#83877
noname#83877
回答No.2

一応不可能ではないです。 ですが、それぞれのブラウザごとにデフォルトスタイルの値が違うので、元のスタイルを指定しなおすとなるとハックを多用して一つずつ指定いくことになります。 単純に全称セレクタを使わないのがソースも短く確実です。

bhdkgo
質問者

お礼

お返事ありがとうございます。 確かにハック多用するより、 全称を見直したほうが良いかもしれませんね。 設定しやすいソースを考え直してみます。

noname#83877
noname#83877
回答No.1

*を使わずに全ての要素を指定するしかありません。 html,body,h1,h2,h3,h4,h5,h6,blockquote,img,textarea,pre,table,th,td,address,p,ul,ol,dl,dd,address,fieldset,legend,option { border:0px; margin:0px; padding:0px; }

bhdkgo
質問者

補足

お返事ありがとうございます。 フォームは全く変化ないのですが・・・ 1度*で変形させたフォームは、元に戻すことは無理なのでしょうか。

関連するQ&A

  • CSSについてお聞きします。

    私は、ブラウザごとにデフォルトで余白など入ってくるため、スタイルシートに*(アスタリスク)で *{ margin:0; padding:0; border0; } と指定しています。 こうすることでページ全体に入る無駄な余白などを一旦0にしてからpaddingなどをかけていくようにしているのですが、ひとつ問題が出てしまいます。 それは、全体にCSSの効果が入るため、input type="button" などでボタンを配置した時に、デザインがグラフィックのかかってない格好悪いボタンになってしまいます。 全体にCSSをかけてもボタンのデザインが崩れない方法がないのか知っている方がいれば教えて頂けないでしょうか? どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • フォームが枠で囲えない

    HTMLとCSSの勉強でサイトを作っているのですが、上下に文章があり、その文章の間にフォームがあるのですが、上の文章しか枠で囲えなくて困っています。 [HTML] <body> <h4>題名</h4> <p class="box"> 文章1 <form method="get" action="hoge.php"> <input type="text" name="form" size="25"><input type="submit" value="実行"> </form> 文章2 </p> </body> [CSS] body { line-height: 1.5; text-align: center; margin-top: 30px; } .box { width: 50%; margin-left: auto; margin-right: auto; border: 1px #000000 solid; } これで、文章1しか枠に囲われません。 回答よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSについて 入力フォームの上下揃い

    CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう?

  • 【HTML/CSS】ボタンの枠が伸びてしまいます

    htmlでコーディングをしています。 ボタン作成の部分で、どうしても解決できないことがあり、 投稿させて頂きました。 大変お手数ですが、ご教授頂けたらと思います。 input typeが「submit」のボタンに、画像を重ねて、機能はそのままにうまく配置するところまで できました。 ところが、Iceweaselというブラウザで見るとボタンの枠線は消えているのですが、 IE(バージョン11)で見ると、添付の画像のように、枠線が表示されてしまいます。 問題のボタンのhtml側とcss側の記載は以下の通りです。 ※<br>のタグは見易くするため、以下では省略しています。 *************************************************** 【html側】 <button input type="submit" value="検索"><img src="button_suche.gif" border="0"></button> <button input type="submit" value="決定"><img src="button_bestimmen.gif" border="0" style="width: 75px; height: 30px; margin-right:200px"></button> <button input type="button" value="全選択" onclick="chkAll_form(true)" /><img src="button_allegewaehlt.gif" border="0"></button> <button input type="button" value="全解除" onclick="chkAll_form(false)" /><img src="button_ganzefreilassung.gif" border="0"></button> 【css側】 button{ /*width: 75px;*/ /*height: 30px;*/ width:auto; padding:0; margin:0; background:none; border:none; font-size:0; line-height:0; overflow:visible; cursor:pointer; } *************************************************** なお、Iceweasel側でも、枠線は消えているのですが、 クリックすると、iEで伸びている分(margin-right:200pxの分)も含めた 幅の点線が表示されます。 またIE側は、そういうコーディングはしていないのに、 ボタンのマウスを充てると、まわりの枠が水色に反転します。 ※添付の図の「決定」ボタンの状態です。 どのようにすれば、IE側のこの枠は消えるのでしょうか。

    • ベストアンサー
    • HTML
  • CSSの優先順位について

    うまく説明できるかわかりませんが・・・ XHTMLとCSSでページを作成しています。 デザインは全て外部CSSを参照しているのですが、 トップページだけ、一部個別設定したいと思っています。 リストメニューのデザインを現在このようにしています。(外部CSS) ul{ list-style-type:none; margin-left:0; padding-left:0; padding:0; margin-top:30px; width:120px; float:left } li{ padding-right:10px; font-size:0.75em; margin-bottom:10px; border-bottom:solid 1px #66aa66 } --------------------------------------- トップページだけ、 ul{ list-style-type:none; margin-left:0; padding-left:0; background-color:#efef77; padding:3px 20px; margin-top:0 } li{ display:inline; padding-right:10px; font-size:0.75em } ----------------------------------- この設定にしたいので、トップページヘッダーにこちらを入力しました。(外部CSSよりヘッダーを優先するとテキストに書いてありました) しかし、 li{ display:inline; } だけは、外部CSSを参照してしまいます。 なぜでしょうか?? 優先させる為に li display:inline !important; } としてみましたが、ダメでした。 どなたかご教授願いますm(__)m

  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>

  • form action ボタンの作り方

    form actionでボタンを作っているのですが、 a href リンクではないためか、カーソルを合わせても矢印の表記が変わりません。 具体的には以下のようなコードになっています。 <FORM ACTION="#" METHOD="POST"> <INPUT TYPE="HIDDEN" NAME="aid" VALUE=" "> <INPUT TYPE="HIDDEN" NAME="pt" VALUE=" "> <INPUT TYPE="HIDDEN" NAME="iid" VALUE=" "> <center><INPUT style="width: 200px; padding: 15px 15px; font-size: 1.2em; background-color: #2e2e2e; color: #fff; border-style: none; border-radius: 5px; border-bottom: 3px solid #000;" TYPE="submit" NAME="submit" VALUE=" "></center> </FORM> カーソルを合わせたときに矢印表記が変わるようにするためには、どのようにコードを直せばいいでしょうか。

  • yahooの検索窓の色の変え方

    自分のホームページにyahooの検索窓を設置したのですが検索窓の行が白くなってしまいます。バックの色と同じにするにはどうしたらいいでしょうか?内容はこんな感じです。 <!-- Begin Yahoo Search Form --> <div style="margin:0;padding:0;font-size:14pt;border:none;background-color:#FFF;"> <form action="http://search.yahoo.co.jp/search" method="get" target="_blank" style="margin:0;padding:0;"> <p style="margin:0;padding:0;"><a href="http://search.yahoo.co.jp/" target="_blank"><img src="http://i.yimg.jp/images/search/guide/searchbox/ysearch_logo_110_22.gif" alt="Yahoo!検索" style="border:none;vertical-align:middle;padding:0;border:0;"></a><input type="text" name="p" size="28" style="margin:0 3px;width:50%;"><input type="hidden" name="fr" value="yssw" style="display:none;"><input type="hidden" name="ei" value="▲▲▲" style="display:none;"><input type="submit" value="検索" style="margin:0;"></p> </form> </div> <!-- End Yahoo! Search Form --> よろしくお願いします。

  • フォームについて

    <form action="test.php" method="GET"> <input type="hidden" name="page" value="1"> <input type="submit" value="index"></form> <form action="test.php" method="GET"> <input type="hidden" name="page" value="1"> <input type="submit" value="index"></form> --------------------------------------------- このようにして書くと、どうしてもボタンが縦に並んでしまいます。どのようにすれば横一列に並べる事が出来るでしょうか?

    • ベストアンサー
    • HTML
  • テキストをボーダーで囲むCSS

    CSSを本を見ながらやっていますが、 下記の例文でテキストをボーダーで囲むものをやってみました。 この中で、 margin-left:100px; margin-right:100px; というころですが、これはブラウザに対しての両サイド空きを意味していると思うのですが、逆に囲んでいる幅のほうを指定するにはどうしたらよいのでしょうか。 または、そのようなことはできないのでしょうか。 <STYLE TYPE="text/css"> <!-- P.text {text-align:justify; text-justify:distribute; line-height:154%; margin-left:100px; margin-right:100px; border-style:solid; border-width:2px; border-color:#dd8888; padding:10px} --></STYLE> *****HTML <P CLASS="text"> テーブルみたいになるテキスト</P>

    • ベストアンサー
    • HTML