Grow your CSS skills. Land your dream job.

Visibly hidden input not rendering text

  • # May 26, 2013 at 8:33 am

    I have a fork of Christian Bach’s tablesorter on Github and I added a filter widget with a row of search inputs that can be made to hide until hovered over or one of the search inputs gets focus ([demo](http://mottie.github.io/tablesorter/docs/example-widget-filter.html#demo)) (hover over the grey bar below the table header).

    Just recently, I noticed that Chrome (not sure about Safari) doesn’t render the text inside of these previously hidden search inputs. I will probably update the plugin today or tomorrow, so the above demo may not have the hidden filters enabled – then check out this jsFiddle of the problem: http://jsfiddle.net/Mottie/Mjbab/1/

    **What I’d like to get help with is finding a work-around using css and/or javascript to make the text visible.**

    My only requirements are that the input has to become visible when the row is hovered, or the input gets focused. And, the reason `display:none` can not be used in this case is because the input can not be tabbed into when completely hidden, but it can be when it is set to `visibility : hidden`. I think this is only a problem with search type inputs, but I’d like to keep them as search inputs because of the “x” that clears the entry, but I’ll give that up if it’s my only solution.

    Thanks

    # May 26, 2013 at 8:40 am

    Works for me in FF, Chrome and Safari on Mac OS X

    # May 26, 2013 at 9:03 am

    Hmm, I turned off all of my extensions in Chrome… maybe it’s just Chrome for Windows. *sigh*

    # May 26, 2013 at 9:15 am

    Windows 7 – Chrome 26 and i can see the text in the inputs.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".