CSS输入文本装饰

我正试图在这里实现一些类似网站的东西：（上面写着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;
}

TB
.文本框{
边框：1px实心#中交；
大纲：0；
高度：22px；
宽度：30px；
}
.textbox2{
边框：1px实心#中交；
字体大小：16px；
背景色：#f0；
填充：3px6px 3px6px；
}

实例：

任何帮助都将不胜感激

---

谢谢大家!

他们在那个网站上使用Twitter引导来获得那个样式：。

他们在那个网站上使用Twitter引导来获得那个样式：。

我通过混合使用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 */
}

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

---

我是通过混合使用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 */
}

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

---

我已经更新了你的小提琴：

主要由以下人员完成：

label {
  display: inline-block;
}

还有一些风格上的调整

---

不管它是

标签还是其他什么东西。
我已经对你的小提琴做了更新：

主要由以下人员完成：

label {
  display: inline-block;
}

还有一些风格上的调整

无论它是
标签还是其他东西，这都无关紧要。
您需要这样修改html（span的属性与div不同）：

HTML

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

您需要这样修改html（span的属性与div不同）：

HTML

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

他们是sing bootstrap类，你可以在这里获得css=>：）他们是sing bootstrap类，你可以在这里获得css=>：）css本身就足够了
输入：focus{background:red；}
@Slavenko Miljic-是的，但是如果OP需要IE7支持，这将不起作用。谢谢你的回复，伙计！我试图避免使用jQueryWell，如果不担心较旧的浏览器，请使用上面@SlavenkoMiljic所说的伪类：focus。这只是一个很小的片段，但是如果你想要一个纯JavaScript解决方案，请告诉我，我会更新我的答案。仅CSS就足够了。
input:focus{background:red；}
@Slavenko Miljic-True但是如果OP需要IE7支持，这将不起作用。谢谢你的回复！我试图避免使用jQueryWell，如果不担心较旧的浏览器，请使用上面@SlavenkoMiljic所说的伪类：focus。这只是一个很小的片段，但是如果你想要一个纯JavaScript解决方案，请告诉我，我会更新我的答案。非常感谢你，伙计！太棒了谢谢你，伙计！太棒了谢谢你的回复，伙计！谢谢你的回复，伙计！