CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
andilabs
andilabs

Reputation: 23321

Can I put badge inside bootstrap input?

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?

enter image description here

Upvotes: 5

Views: 15598

Answers (1)

Steve Sanders
Steve Sanders

Reputation: 8651

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"].

Upvotes: 8

Related Questions