Menu icon Foundation
No Clear (X) Button in F6 Search Field?

I just noticed that there is no (x) button on input fields with type = search in Foundation 6.

Here's a pen by Rafi showing the correct input in Foundation 5: https://codepen.io/rafibomb/pen/YPwWYy

Here's the identical pen in Foundation 6.3. Note the missing (x) in the right side of the input: https://codepen.io/anon/pen/ypRNqZ

Is this a known issue? Can it be easily fixed?

formformsinputtypesearch

I just noticed that there is no (x) button on input fields with type = search in Foundation 6.

Here's a pen by Rafi showing the correct input in Foundation 5: https://codepen.io/rafibomb/pen/YPwWYy

Here's the identical pen in Foundation 6.3. Note the missing (x) in the right side of the input: https://codepen.io/anon/pen/ypRNqZ

Is this a known issue? Can it be easily fixed?

Rafi Benkual 7 months ago

Not sure what you mean exactly. You can line up form elements using the built in helpers: https://foundation.zurb.com/sites/docs/forms.html#inline-labels-and-buttons

Roy Hinkley 7 months ago

Check out this pen using Foundation 5: https://codepen.io/rafibomb/pen/YPwWYy

When using Chrome and Safari, typing something in the field shows the little (x) appear on the right side of the input. Clicking that little icon clears the search field. This doesn't seem to work in FireFox, at least not the version I'm using.

Here's the exact same code, but in Foundation 6.3 https://codepen.io/anon/pen/ypRNqZ

Notice how when you enter text in the field, no (x) icon appears on the right side. There is no way to clear the input from that field. This is the behavior with Foundation 6 on Chrome, FireFox and Safari.

 

 

 

 

Gabriel Burning 6 months ago

I'm having the same problem. I'm currently looking into why it could be but so far I've had no luck.

Gabriel Burning 5 months ago

Had some time to look into this again. It seems like the -webkit-appearance property is overridden in some way by Foundation. It's kind of hard to test exactly what as the clear button doesn't show up in the DOM. In any case, you should be able to get the button back with the following CSS:

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

More info:

https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-search-cancel-button

 

UPDATE: It seems that this is explicitly removed in Foundation's CSS. So, unless that changes you'll always have to add it back in manually.

https://github.com/zurb/foundation-sites/issues/11015

Roy Hinkley 5 months ago

Thank you Gabriel! This is exactly what I was talking about! I'd love to know why it's explicitly removed. I feel like there has to be a (good?) reason, but I can't imagine what it would be. Thanks again for the super helpful info!