1

インラインの<input type=image>幅/高さがinputスタイルによって上書きされています。これを修正する方法はありますか？または、この状況ではインラインスタイルは機能しませんか？

HTML：

<form id="search" name="search" form method="get" action="find_search.php">
    <input type=  "text" name=     "q" value=""  />
    <input type="hidden" name=   "cat" value=""  />
    <input type="hidden" name=  "time" value="0" />
    <input type="hidden" name="letter" value=""  />
    <input type="hidden" name="offset" value="0" />
    <input type="hidden" name=  "type" value="quick" />
    <input type= "image" src="images/search_button.png" value="Search" width="200" height="50" />
</form>

CSS：

input {
   width:50%;
   padding:0px;
   outline:none;
   height:36px;
   font-size:24px;
}
4

2 に答える 2

2

You can accomplish this by using more specific CSS selectors like input[type=text] and input[type=image]. So if you want the height/width specified in your question to only apply to <input type="text">, you would do something like this:

Keep the non-height/width properties in the less specific input selector:

input {
   padding:0px;
   outline:none;
   font-size:24px;
}

Then use the height/width properties in the input[type=text] selector:

input[type=text] {
   width:50%;
   height:36px;
}

Then you can add a differnet height/width for the input[type=image] selector:

input[type=image] {
   width: 200px;
   height: 50px;
}

Also, keep in mind that you can make your selectors more specific if you use the id of the form in your selectors, like so:

  • #search input
  • #search input[type=text]
  • #search input[type=image]
于 2013-02-19T19:11:09.967 に答える
0

私は個人的に次のようなクラスを使用します。

    <form id="search" name="search" form method="get" action="find_search.php">

    <input class="input" type=  "text" name=     "q" value=""  />
    <input type="hidden" name=   "cat" value="" />
    <input type="hidden" name=  "time" value="0" />
    <input type="hidden" name="letter" value="" />
    <input type="hidden" name="offset" value="0" />
    <input type="hidden" name=  "type" value="quick" />
    <input class="button" type="image" src="images/search_button.png"  value="Search"  width="200" height="50"
  />

  </form>

.input
{
   width:50%;
   padding:0px;
   outline:none;
   height:36px;
   font-size:24px;
}
.button{
   /*your button CSS*/
}
于 2013-02-19T19:14:31.367 に答える