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

您可以通过使用更具体的 CSS 选择器（如input[type=text]和）来完成此操作input[type=image]。因此，如果您希望问题中指定的高度/宽度仅适用于<input type="text">，您可以执行以下操作：

将非高度/宽度属性保留在不太具体的input选择器中：

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

然后使用input[type=text]选择器中的高度/宽度属性：

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

然后您可以为选择器添加不同的高度/宽度input[type=image]：

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

另外，请记住，如果您在选择器中使用idof ，您可以使选择器更加具体form，如下所示：

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

I personally would use classes such as:

    <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 回答