html - 使用 CSS 输入没有框的文本

Question

我的客户想要这样的搜索输入:

“搜索...”是输入文本，放大镜是提交按钮(这不是创建问题)。我正在寻找一些教程，但没有找到任何东西。是否可以创建看起来像这样的输入？如果是的话，你能解释一下如何创建它或者只是让我引用一些教程吗？非常感谢提前。

Answer 1

我创建了一个 cssdeck:http://cssdeck.com/labs/iicbd9ko

HTML:

<form>
  <input type="text" name="search" placeholder="Search..." />
  <button type="submit">[search icon]</button>
</form>

CSS:

::-webkit-input-placeholder {
   color: #fff;
}

:-moz-placeholder { /* Firefox 18- */
   color: #fff;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #fff;  
}

:-ms-input-placeholder {  
   color: #fff;  
}

form {
  margin: 50px;
  padding: 5px;
  background: green;
  display: inline-block;
}

form input {
  border: none;
  background: transparent;
  border-bottom: 1px solid #fff;
  outline: none;
}

form button {
  background: transparent;
  border: 0;
  color: #fff;
}

TJL