Question

这是我的代码：

<script>
    String.prototype.replaceAll = function(str1, str2, ignore){
       return this.replace(new RegExp(str1.replace(/([\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|<\>\-\&])/g, function(c){return "\\" + c;}), "g"+(ignore?"i":"")), str2);
    };

    var searchList = {
      Google : "http://google.com/search?q=[Q]",
      Yahoo : "https://hk.search.yahoo.com/search?p=[Q]",
      DuckDuckGo : "https://duckduckgo.com/?q=[Q]",
      YahooKnowledgeHK : "https://hk.knowledge.yahoo.com/search/search_result?p=[QUERY]",
      Ebay : "http://search.ebay.com/[Q]"
    };

    function search(){

      try {
        searchEngine = document.querySelector("#searchEngine");
        searchQuery = document.querySelector("#searchQuery");

        window.location.href = searchList[searchEngine.value].replaceAll("[Q]", searchQuery.value);
      }
      catch (e){
        alert("Error : " + e + ".");
      }
    }
    </script>
<style>
    [searchBar] { 
      font-family: "Courier New", Courier, monospace; 
    }

    form[searchBar] { 
      margin: 0px; 
    }

    input[searchBar], select[searchBar] {
      display: inline-block;
      height: 30px;
      padding: 5px!important; 
      margin: 0px!important;
      line-height: 30px!important;
      border: 1px solid #000000;
    }

    input[type="submit"][searchBar] {
      background-color: #ffffff;
      transition: all 0.5s ease-in-out 0.1s;
    }

    input[type="submit"][searchBar]:hover { transform: rotate(360deg); }

    #search-bar[searchBar] {
      display: inline-block;
      margin: 0px;
      padding: 10px;
      border: 5px groove #000000;
      width: auto; height: auto;
      background-color: #fff;
      transition: all 0.5s ease-in-out;
    }

    #searchQuery[searchBar] {
        width: 100px;
        transition: all 0.5s ease-in-out;
    }

    #searchQuery[searchBar]:focus {
        width: 200px;
    }
</style>
<div searchBar id="search-bar">
  <form searchBar id="search-form">
    <select searchBar id="searchEngine">
      <option disabled value="">Search Engine : </option>
      <option disabled></option>
      <option disabled>Most Popular</option>
      <option selected value="Google">Google</option>
      <option value="Yahoo">Yahoo</option>
      <option value="DuckDuckGo">DuckDuckGo</option>
      <option disabled></option>
      <option disabled>Learn Everything!</option>
      <option value="YahooKnowledgeHK">Yahoo! Knowledge HK</option>
      <option disabled></option>
      <option disabled>Go Shopping</option>
      <option value="Ebay">Ebay</option>
    </select>
    <input searchBar id="searchQuery" type="text" placeholder="Search......" />
    <input searchBar type="submit" onclick="search();return false;" value="Search!" />
  </form>
</div>

JS Bin

提交按钮的填充底部不太正确，而填充顶部太高。

我可以做什么（HTML或CSS）使填充与input type="text"和select相同？

我不知道该怎么做。请帮助^。^！

Answer 1

从

中删除line-height: 30px!important;

input[searchBar], select[searchBar] {
  display: inline-block;
  height: 30px;
  padding: 5px!important; 
  margin: 0px!important;
  line-height: 30px!important;
  border: 1px solid #000000;
}

Answer 2

注释掉（或删除）代码的第51行：

line-height: 30px!important;

强制行高是罪魁祸首： - ）

输入类型提交错误的填充

2 个答案: