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

Answer 2

入力が次のとおりであると仮定します。

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

css を使用してスタイルを設定します。

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

Answer 3

このフィドルを確認してください。与える

border-bottom