1

純粋な「CSS」を使用して、下の画像のように入力ボックスをスタイル化する方法。これは jquery を介して実行できることは知っていますが、CSS を使用して実行する方法があれば熱心です。Android の Developer Web サイトから画像を取得しました。

入力ボックス

私がやったのはHTMLで、

<form>
    <label>Email Address: </label>
    <div class='left'></div>
    <input type='text' class='input'/>
    <div class='right'></div>
</form>

そしてCSS、

.left {
    display:inline-block;
    height:7px;
    border-left:1px solid #ccc;
    position:absolute;
    margin-top:23px;
}

.right {
    display:inline-block;
    height:7px;
    border-left:1px solid #ccc;
    position:absolute;
    margin-top:23px;
    margin-left:-1px;           
}

.input {
    display:inline-block;
    height:30px;
    font-size:16px;
    width:250px;
    border:1px solid  #ccc;
    border-width:0px 0px 1px 0px;
    padding:0px 5px;  
    outline:none;
}

.input:hover, .input:focus {
    border-color:#4ab5d9;
}

私がしようとしているのは=> jsfiddleリンクにもあります

唯一の問題は、ホバー時とフォーカス時に左右の境界線の色を変更する方法が見つからないことです。

4

3 に答える 3

6

1つのオプションはこれです

ホバーとフォーカスを機能させるために兄弟セレクターを使用しました。

.input:hover, .input:focus,
.input:hover + .right,
.input:focus + .right {
    border-color:#4ab5d9;
}

「左」のdivを削除しました。次に、これらの変更を正しいものに加えました。

margin-top:23px;
margin-left:-260px;
width:258px;
pointer-events: none;
于 2013-01-23T12:29:27.160 に答える
2

以下は、HTML にタグを追加せずに背景の CSS プロパティを使用して、Chrome で機能します (フォーカス/ホバーの色の変更をサポートします)。

HTML:

<input type='text' class='holo'></input>

CSS:

input.holo[type='text'] {
  /* You can set width to whatever you like */
  width: 200px;
  font-family: "Roboto", "Droid Sans", sans-serif;
  font-size: 16px;
  margin: 0;
  padding: 8px 8px 6px 8px;
  position: relative;
  display: block;
  outline: none;
  border: none;
  background: bottom left linear-gradient(#a9a9a9, #a9a9a9) no-repeat, bottom center linear-gradient(#a9a9a9, #a9a9a9) repeat-x, bottom right linear-gradient(#a9a9a9, #a9a9a9) no-repeat;
  background-size: 1px 6px, 1px 1px, 1px 6px;
}
input.holo[type='text']:hover, input.holo[type='text']:focus {
  background: bottom left linear-gradient(#0099cc, #0099cc) no-repeat, bottom center linear-gradient(#0099cc, #0099cc) repeat-x, bottom right linear-gradient(#0099cc, #0099cc) no-repeat;
  background-size: 1px 6px, 1px 1px, 1px 6px; 
}

デモ: http://jsfiddle.net/QKm37/

于 2014-02-07T22:28:56.063 に答える
2

私は同じ問題を抱えていました.追加のマークアップを必要としないこのようなスタイルを作成しました. デモについては、 http://codepen.io/killercup/pen/CBeAqを参照してください。

linear-gradient私の解決策は、 を使用してサイズ変更された複数の背景画像 (実際には) を使用することbackground-sizeでした。Android 4.3 で動作しますが、他のモバイル プラットフォームではテストしていません。

于 2013-11-16T15:12:15.207 に答える