CSS ввод текста украшение

Question

Я пытаюсь добиться чего-то вроде сайта здесь: http://bit.ly/1f55jUR (., Где он говорит Space Min), но я с треском провалились лол ..

Здесь не то, что я сделал до сих пор:

<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, как это (оболочка не обладает теми же свойствами, чем дела):

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 или что-то еще.