Safari+Chrome: input[type=search].form-control with results attribute displays results decoration incorrectly

[vinorodrigues]

In webkit based browsers an <input> tag of type="search", of class="form-control" AND results history switched on (results="x") displays the results dropdown incorrectly:

• on Safari on OSX - it seems to cut off (the a magnifier icon) on the left
• on Chrome (49) - it seems to leave a wide space on left

  <input type="search" class="form-control" results="10">

I'm aware that TWBS accounts for selector::-webkit-search-cancel-button , but I cannot find a reference to selector::-webkit-search-results-button

Example in JSFiddle

[twbs-lmvtfy]

Hi @vinorodrigues!

You appear to have posted a live example (https://fiddle.jshell.net/vinorodrigues/sLgwgcqa/show/light/), which is always a good first step. However, according to the HTML5 validator, your example has some validation errors, which might potentially be causing your issue:

• line 74, column 1 thru column 73: Attribute results not allowed on element input at this point.
• line 81, column 1 thru column 94: Attribute results not allowed on element input at this point.

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[vinorodrigues]

True - results is not standard HTML5 attributes per-se - but they are part of webkit... used in both Safari and Chrome.

See this reference, and the Safari docs.

[mdo]

Bootstrap 3 is no longer being officially developed or supported.

All work has moved onto our next major release, v4. As such, this issue or pull request is being closed as a "won't fix." For additional help and support, we recommend utilizing our community resources. Thanks for your understanding, and see you on the other side of v4!

<3,
@mdo and team