user profile image

A search icon that reveals a search bar on hover


  1. It's buggy in Firefox

  2. Btw it looks and works great in Chrome, very well done I love it

  3. thanks for the heads up! I had some nastiness with my box-sizing and transitions. It should be working much better now except for that weird issue with the icon.

  4. Yes it works great now well done! and btw, about the icons thing, it's because FF does not allow cross domain fonts, but there's a fix to that, u can include font-awesome's stylesheet in the css settings panel as an external sheet, the stylesheet is avaialbe at Bootstrap's CDN, a codepen member told me about this once when I was having the same problem with icons fonts in my demos here's the link to include: http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css

  5. just include this and u can remove the @font-face rule and everything, just include whatever class name u need in ur html.. if i'm not being clear enough u can see my last demo, where I did it for the navigation icons.

    1. saves a lot of lines of code
    2. easier and cleaner. Good work again :)
  6. That's awesome Sara! thanks for your help!

  7. No need :) u're welcome :) it looks awesome now in both browsers :) yay :)

  8. Beautiful work! here is a hta access rule you can add to your font folder to make them work in Firefox cross domain stylie :). Then you can just link to them in the options panel as an external CSS file if you want. check my pen here http://codepen.io/jwebcat/pen/vrcfL It works with any font.

  9. This didn't work on my mobile (iPhone 6) I was wondering if you were already aware or if this was perhaps just me...


  10. @Zambala I was not. Thanks for the heads up! It should be working now

  11. Great work @arthurra Do you have any idea of how to keep the bar expanded whenever a user is typing in the bar and moves the mouse away(no longer hovering over the element)?

    Kind of like when it is an active state or when it has a cursor in the search bar.

    Thanks again for creating something so rad with only CSS!


  12. @luukee the :focus-within pseudo selector seems to solve it pretty well, however, browser support isn't the best.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.