Clear / reset "x" button inside input-field?

HTML & CSS
1

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 :slight_smile:

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.

Any ideas on how to do this?

Regards,
Team 1504

2

Apple uses JS to accomplish that.

<input type="search">

adds an x when you start typing in the text field in webkit browsers.

3

How does one do it in js, though?

Also, are there anyways to do something like that in css / css3 or html / html5?

4

The only way I know of to do it is using the HTML 5 input type already mentioned.

The only other way to fdo it would be to fake it by placing one field on top of another.

5

Oh ! I thought you meant apple uses JS along with <input type=“search” />

Okay, well its not necessary. so ill make sure the field in question has type=“search”

Thank you all! :slight_smile:

P.S. I realised where I saw that x with :Google: its on the new mobile version of their home

6

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.

7

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?

8

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?

It’s for moms… you know, those people who fill out forms using mice? Lawlz.

I save my hate for autocomplete and autofocus. Those are evil enough to have come straight from the frozen hells.

9

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 :nono: (:

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 :blush:

lawlz :lol::rofl::lol: lawlz

True that ( Tru Dat :cool: ) 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!