Question

我的<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;
}

Answer 1

您可以使用更具体的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;
}

此外，请注意，如果您在选择器中使用id的{{1}}，则可以使选择器更具体：

form
#search input
#search input[type=text]

Answer 2

我个人会使用以下类：

    <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*/
}

为什么我的CSS样式会覆盖我的内联样式？

2 个答案: