スタイリングの連絡フォーム（入力とテキストエリア）の問題

Question

添付されている連絡先のスタイリングに問題があります。

私はこの効果をどのように達成することができますか？

イメージでは、「ラベル」が入力テキストボックスに組み込まれているように見えます。入力されたテキストは、各ラベルの横に表示されている間

が

1）私は、ラベルがその固定位置に滞在したい：ホバー時

。

2）ラベルと入力ボックスの境界線は、入力テキストとは異なる色でハイライト表示する必要があります。事前にあなたの助けのための

I expect inputs like this 

http://i.stack.imgur.com/RIcbQ.png

from this fiddle 

jsfiddele

ありがとう！

Answer 1

:focusセレクタを使用して、テキストボックスをクリックすると、色やスタイルを変更できます。

、このいずれかを試してみてください。

.input-container { 
    position: relative; 
    width: 150px; 
    margin-bottom:10px; 
} 
.input-container input { 
    width: 100%; 
    box-shadow:none; 
} 

.input-container .unit { 
    position: absolute; 
    display: block; 
    top: 3px; 
    right: -3px; 
    background-color: grey; 
    color: #ffffff; 
    padding-left: 5px; 
    width: 45px; 
} 
.input-container input:focus{ 
    border-color:green; 
    color:green; 
} 
.input-container input:focus + .unit{ 
    color:green 
} 

<div class="input-container"> 
    <input type="text" value="102.95" name="" /> 
    <span class="unit">Volts</span> 
</div> 
<div class="input-container"> 
    <input type="text" value="30" name="" /> 
    <span class="unit">Kilos</span> 
</div> 
<div class="input-container"> 
    <input type="text" value="64" name="" /> 
    <span class="unit">km/h</span> 
</div> 

Answer 2

UPDATED FIDDLE

私は:focusを使用することをコメントで提案として、私はそれが私たちはすべての添付ファイルが表示されない

.input-container input { 
    width: 100%; 
    border-color: grey; 
    border-bottem:1px; 
    border-left:0px; 
    border-right:0px; 
    border-top:0px; 
} 

.input-container .unit { 
    position: absolute; 
    display: block; 
    top: 3px; 
    left: 3px; 
    color: grey; 
    padding-left: 5px; 
    width: 45px; 

} 
input{color:grey; text-align:right;} 
input:focus { 
    color: green; 
    border-color: green; 
    outline:none; 

} 
.input-container input:focus + .unit{ 
    color:red; 
}