CODEWITHSUNDEEP
htmlcss
felix001
felix001

Reputation: 16691

Twitter Bootstrap icons to expanding Input Boxes

I have 2 input boxes that expand out once clicked. The code looks like

<form class="search" method="post" action="">  
    <input class="icon-plus-sign" id="search-box-add" type="text">
    <input class="icon-minus-sign" id="search-box-del" type="text">
</form>

.search label{
    font-size:0.75em;
    font-weight:bold;
    color:#333;
    text-indent:-9999em;
    display:block;
    float:left;
}
.search input[type="text"]{
    text-indent:1px;
    padding:0 0 0 22px;
    width:0;
    height:22px;

    border:1px solid #ccc;
    color:#000;

    -webkit-transition:width 0.5s ease-in-out;
    -moz-transition:width 0.5s ease-in-out;
    cursor:pointer;
}
.search input[type="text"]:focus{
    width:200px;
    outline:none;
    cursor:text;
}

http://jsfiddle.net/ye0k18jj/40/

The problems I have are,

Any ideas,

Upvotes: 2

Views: 541

Answers (4)

Nitesh
Nitesh

Reputation: 1267

You need to do few html and css changes. You can look at the fiddle and understand the way in which it is implemented. [http://jsfiddle.net/ye0k18jj/44/

.search label{
    font-size:0.75em;
    font-weight:bold;
    color:#333;
    text-indent:-9999em;
    display:block;
    float:left;
    width:15px;
    z-index:-1;
      margin-top: 4px;
}
.search input[type="text"]{
    float: left;
    margin-left: -15px;
    padding:0 0 0 30px;
    width:10px;
    height:22px;
    background: transparent;
    border:1px solid #ccc;
    color:#000;
   
    -webkit-transition:width 0.5s ease-in-out;
    -moz-transition:width 0.5s ease-in-out;
    cursor:pointer;
    float: left;
    margin-left: -15px;
    margin-right:10px;
}
.search input[type="text"]:focus{
    background: transparent;
    width:200px;
    outline:none;
    cursor:text;
}
<form class="search" method="post" action="">  
<span>    <label class="icon-plus-sign"></label>
    <input  id="search-box-add" type="text">
    </span>
    <span>
    <label class="icon-plus-sign"></label>
    <input id="search-box-del" type="text">
        </span>
</form>

]1

Upvotes: 0

Bluety
Bluety

Reputation: 1909

The best way is modify your html like so:

<label for="search-box-add">
    <span class="icon-plus-sign"></span>
    <input id="search-box-add" type="text">
</label>

The label with for attribute gives focus to input on click event.
The span element is icon.

You can see an example here (you must adjust CSS): http://jsfiddle.net/ye0k18jj/42/

Upvotes: 0

Robin
Robin

Reputation: 864

see this fiddle, I expect this is what you are looking for.

<form class="search" method="post" action="">  
    <label for="search-box-add" class="icon-plus-sign"></label>  
    <input id="search-box-add" type="text">   
    <label for="search-box-del" class="icon-minus-sign"></label>                   
    <input id="search-box-del" type="text">
</form>


.search label { position:absolute; margin:5px 0 0 5px; }

Upvotes: 2

Vishal
Vishal

Reputation: 394

You need to take "icon-plus-sign" outside the input box using <span class="icon-plus-sign"> and then place this icon using absolute positioning into the input box. P.S. Keep icon width as there in sprite. Thanks!!

Upvotes: 0

Related Questions