Question

我对附加的联系表单有一些问题。

有没有人对如何实现这种效果有任何想法或建议？

在图片中，它看起来像＆＃34;标签＆＃34;被合并到输入文本框中。

悬停时：

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;
}

问题样式联系表（输入和textarea）

2 个答案: