Question

我正在努力实现像这里的网站：http://bit.ly/1f55jUR（其中它说的是Space Min。）但是我失败了很可惜lol ..

这是我到目前为止所做的事情：

<input type="text" class="textbox" id="box" /><span class="textbox2">TB</span>

.textbox {
   border: 1px solid #cccccc; 
   outline:0; 
   height:22px; 
   width: 30px; 
}
.textbox2 {
   border: 1px solid #cccccc;
   font-size: 16px;
   background-color: #f0f0f0;
   padding: 3px 6px 3px 6px;
}

实例： http://jsfiddle.net/55Nb3/

任何帮助都将受到高度赞赏。

谢谢！

Answer 1

你需要像这样修改你的html（span不具有与div相同的属性）：

<强> HTML

<input type="text" id="textbox" /><label for="textbox" clhttp://jsfiddle.net/55Nb3/#forkass="textbox2">TB</label>

这是CSS

   #textbox {
   border: 1px solid #cccccc; 
   outline:0; 
   height:30px; 
   width: 30px; 
   border-radius: 4px 0 0 4px;
   box-sizing: border-box;
   font-size: 16px;
}
label {
   display: inline-block;
   vertical-align: top;
   border: 1px solid #cccccc;
   border-left: none;
   font-size: 16px;
   background-color: #f0f0f0;
   line-height: 30px;
   padding: 0 6px;
   height: 30px;
   border-radius: 0 4px 4px 0;
   box-sizing: border-box;
}

Here is a link to it

Answer 2

他们在该网站上使用Twitter Bootstrap来获得这种样式：http://getbootstrap.com/components/#input-groups-basic。

Answer 3

我是通过混合使用jQuery和CSS

来实现的

<强>的jQuery

$('input[type="text"], input[type="email"], input[type="tel"], .post textarea').on('focus blur',function(e){
        if(e.type == 'focus' || e.type == 'focusout'){
            $(this).addClass('focussed');
        } else {
            $(this).removeClass('focussed');
        }
});

<强> CSS

input{
  /* General style here */ 
}
input.focussed{
  /*Different styles for focussed input here */
}

Answer 4

我对你的小提琴进行了更新：http://jsfiddle.net/55Nb3/5

主要由以下人员完成：

label {
  display: inline-block;
}

还有一些风格调整。

如果它是label或其他东西，那无关紧要。

CSS输入文字装饰

4 个答案: