使用 CSS 输入不带框的文本答案

【问题标题】：Input text without box with CSS使用 CSS 输入不带框的文本
【发布时间】：2013-08-10 02:46:30
【问题描述】：

我的客户想要如下所示的搜索输入：

“搜索...”是输入文本，放大镜是提交按钮（创建没有问题）。我正在寻找一些教程，但我没有找到任何东西。是否有可能创建如下所示的输入？如果是的话，你能解释一下如何创建它或者只是让我参考一些教程吗？非常感谢提前。

【问题讨论】：

查看fiddle。

标签： html css input styles

【解决方案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

【讨论】：

【解决方案2】：

假设您的输入是：

<input id="search" type="text" />

使用 css 设置样式：

input#search {
    border: none;
    border-bottom: 1px solid gray;
}

【讨论】：

【解决方案3】：

<div class="search">
<input type="text" class="searchbox"></input>
<input type="image" class="searchbtn" src="img/search.jpg"></input>
</div>

.searchbox
{
outline:none;
width: 220px;
height: 30px;
font-size: 14px;
font-weight:700;
font-family: Arial;
border-bottom: 1px solid blue;
margin:0px;
float:left;
}

希望这会有所帮助。 outline:none 在输入焦点时不会绘制轮廓。

【讨论】：

【解决方案4】：

检查此fiddle。给

border-bottom

【讨论】：