搜索框和提交按钮无边框显示

Question

非常愚蠢的问题，但无法解决......

在我的php项目中，搜索框和提交按钮看起来很奇怪，就像下面的.jpg图片上的那些，为什么这样以及如何解决这个问题？ （search = otsi：）。

在一个简单的html表单上，正常显示相同的代码行，如上部搜索框（带border / otsi：）

检查了我的CSS，它似乎不会影响边框或框。 .php子页面上的代码很简单：

<header id="header">
<div id="logo"><img src="images/logobmw.png"></div>


<div id="searchbox">

<form action="search.php" method="get" enctype="multipart/form-data">

<input type="search" name="value" size="25" >

<input type="submit" name="search" value="  otsi  " >

</form>
</div>
</header>

（搜索字段上的灰色背景是由我在css中设置的，它实际上是白色的，因此，看不见，因为标题的背景颜色也是白色。

CSS *，body，wrapper和header也非常简单：

 * {        
   margin: 0;
   border: 0;
   padding: 0;
  }

body {
  font-family: Calibri, Georgia, Verdana, arial;
  background-color: #F8F8F8 ;
  font-size: 105%;
  color: #303030;
  line-height: 1.4;
  margin: 0;
}

#wrp {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

#header {
  width: auto;
  height: 100px;
  background-color: #fff;
}

Answer 1

选择器“*”适用于所有元素（包括INPUT）。这是删除INPUT的边框。

大多数重置样式表不是使用“*”，而是以单个元素为目标。如果用以下内容替换该选择器，这应该可以解决您的问题：

<div class="clip-wrapper">
  <div class="clip">
    <p>Workshops</p>
    <img name="workshops" alt="workshops" src="http://lorempixel.com/422/750" width="422" height="750" />
    <div class="workshops-container">
      <div class="workshop">
        <img name="workshop1" alt="workshop1" src="_img/ws1.png" width="placeholder" height="placeholder" />
        <header>
          <h1>Workshop 1</h1>
        </header>
        <p>Lorum ipsum</p>
      </div>
      <div class="workshop">
        <img name="workshop2" alt="workshop2" src="_img/ws2.png" width="placeholder" height="placeholder" />
        <header>
          <h1>Workshop 2</h1>
        </header>
        <p>Lorum ipsum</p>
      </div>
    </div>
  </div>
</div>