Search code examples
cssjquery-tokeninput

Making the X, "delete button" bigger than the text using TokenInput and CSS

I'm using the famous TokenInput and I'm restyling the CSS, and I want to make the "X" appear bigger but the text won't centre in line with it and stays at the bottom. Any ideas how I can do this? I'm a bit stumped.

enter image description here

UPDATE:

I have now put a working demo on CodePen (JSFiddle was down at the time, but this is pretty good too).

http://cdpn.io/oauIs

Thanks

CSS:

/*actual token created*/
li.token-input-token-facebook 
{
    overflow: hidden; 
    height: auto !important; 
    height: 15px;
    margin: 2px;
    padding: 5px 3px 5px 5px;
    background: -webkit-gradient(linear, left top, 
                left bottom, from(rgba(170, 214, 221, 1)), to(rgba(0, 128, 183, 1)));
    color: white;
    cursor: default;    
    font-size: 11px;
    border-radius: 4px;
    float: left;
    white-space: nowrap;
}

/*actual writing inside token*/
li.token-input-token-facebook p 
{
    display: inline;
    padding: 0;
    margin: 0;
}

/*Little "x" button to cancel token*/
li.token-input-token-facebook span 
{
    color: white;
    margin: 0 0 0 12px;
    font-weight: bold;
    cursor: pointer;
    font-size: 20px;  /*Here is where I have made it bigger */
}

HTML

<ul class="token-input-list-facebook">
    <li class="token-input-token-facebook" data-uniqueid="u1"><p>Duval,B</p>
    <span class="token-input-delete-token-facebook">×</span>
    </li>
</ul>
Solution

  • This can be fixed by adding line-height to the text, and float to the cross.

    Check this fiddle out: http://codepen.io/anon/pen/jdJAs

    I added the mentioned attributes on line 56 and 66, respectively. As the font-size of the text is specified in percentage, you may need to adjust the line-height manually whenever the font-size is modified.

    Cheers