search

Dogfalo / materialize

Materialize, a CSS Framework based on Material Design
https://materializecss.com
MIT License
38.86k stars 4.74k forks source link

Blinking cursor in Select on IE11 #4413

Closed stsje closed 7 years ago

stsje commented 7 years ago

Focusing a Select in IE11 will add a blinking cursor that is visible through the dropdown.

Bug can be reproduced using the selects in the documentation http://materializecss.com/forms.html

Any CSS fix for this?

DanielRuf commented 7 years ago

Try the following CSS code and let me know if this fixes your problem.

input.select-dropdown:focus {
    text-indent: -9999999em;
}
stsje commented 7 years ago

It seems to be working. But! there seems to be a visible transition effect.

Is it necessary to have transition on all properties? What properties need to have transition? transition: all 0.3s;

DanielRuf commented 7 years ago

That is a good question. @tomscholz do you have some more information?

tomscholz commented 7 years ago

These issues are all duplicates: https://github.com/Dogfalo/materialize/issues/4413 https://github.com/Dogfalo/materialize/issues/4315 https://github.com/Dogfalo/materialize/issues/4306 https://github.com/Dogfalo/materialize/issues/3715 https://github.com/Dogfalo/materialize/issues/3171 https://github.com/Dogfalo/materialize/issues/630

For the future discussion, please use this issue instead. https://github.com/Dogfalo/materialize/issues/3790

madhmeht commented 6 years ago

The css fix causes another problem. After selecting an option from keyboard, the field stays blank. After clicking somehwere else, the value appears.

DanielRuf commented 6 years ago

@madhmeht please provide a coden which shows this issue.

madhmeht commented 6 years ago

@DanielRuf here is the codepen link https://codepen.io/anon/pen/KyRRJy

kaszubski commented 4 years ago

@DanielRuf here is the codepen link https://codepen.io/anon/pen/KyRRJy

Thanks 🙏🙏🙏