Can I put badge inside bootstrap input?

Question

I would like to have effect similar to the one below. Of course best KISS, without tons of JS, etc.

Possible? Would be glad to see some working demo. Best for Twitter Bootstrap 2.3.

For now I have tried with append:

$ ->
   $('#ajax_search_input').append('#danger")

http://jsfiddle.net/andilab/sLmyJ/ I forked also this: http://jsfiddle.net/andilab/kvH9E/ regarding adding of icon. Can it be generalized to badge?

Answer 1

You do not need javascript to accomplish this - you can use absolute positioning to make it appear as if the label is inside of the input. Simple demo below:

http://jsfiddle.net/sLmyJ/1/

.label-danger {
    position: absolute;
    left: 3px;
    top: 5px;
}

Edit - to expand on this, you cannot have any additional elements inside of an input. This is one reason why the button element is often used instead of input[type="button"].