Hello guys,
I do not know if this belongs in CSS or HTML. I would think HTML or even JS.
But I was wondering how does one make one of those x clear buttons on the right and inside an input-field? Is it an attribute ofthe input tag or is it a -webkit attribute that can only be seen in webkit browsers.
I think a good example of what I am trying to accomplish is after one types something into :Google:'s input search field bar
I swear it was there at one point, but now I can not find it.
It is still in Apple’s search bar in the menu bar. If you start typing there, the white x in a grey circle appears to the right and inside of the input field and when it is clicked the field is reset or cleared.
DuckDuckGo has the little cross too. If you click it, it clears the search input. And, it’s keyboard-accessible : )
I would avoid the input type=“search” for now because while only webkit does anything with it, you can’t control what it does with it (you can’t style it or anything). So Javascript is the way to go here, with a regular input type=“text” I would say.
Meanwhile that’s one of those things pissing me off when I encounter it – sucking down width that could be used to show me what’s typed on something as simple as CTRL-A Backspace… Wasting extra code on that to boot?
Oh, I forgot that I already had it set to type=“text”. When I read the solution, that CletusSpuckler & Felgall posted, I thought that I had forgot the type attribute in my html.
But now that I am looking at my code, I see that I had it set to text. Man, there are a lot of bloody HTML5 input types (:
True, width is width. And then the user’s input has a greater chance of not fitting and the earlier characters shifted left and hidden, which I hate!
Oh Đ´Đ°! Pssh why the hell would I waste code then if the user can do that.
Sometimes I have to think things out
lawlz lawlz
True that ( Tru Dat ) I hate those. autocomplete is always set to off for my forms. And I seriously believe that it should be off by default! And the only reason why autofocus is semi-acceptable is when the only thing on a page is a form. Even :google:'s home-page has content other than the form!