Fix radio and checkbox style in ios

nostalgic-css / NES.css

NES-style CSS Framework | ファミコン風CSSフレームワーク

https://nostalgic-css.github.io/NES.css/

MIT License

20.57k stars 1.64k forks source link

Fix radio and checkbox style in ios #350

Closed kyu-suke closed 5 years ago

kyu-suke commented 5 years ago

Description I updated radio and checkbox style in iOS. -webkit-appearance: none seems not to work in iOS. So I added visibility: none;

checkbox
radio

ref https://github.com/nostalgic-css/NES.css/issues/8

Thanks for your review 🙏

BcRikko commented 5 years ago

Thanks for your pull request. 🎉

I'm concerned about accessibility. 🤔

`visibility: hidden`	`visibility: visible`

If specify visibility: hidden;, radios and checkboxes will be removed from the accessibility tree. I don't know much about accessibility, so I can't think of any other good idea. 😭 Do you have other good ideas? 🤔

ref: visibility - CSS: Cascading Style Sheets | MDN

kyu-suke commented 5 years ago

@BcRikko Thanks for your review!! oh.. You are correct! I confirmed that radio that is set visibility: none is not focused by tab 🙏 I found some ways about hiding input without accessibility loss. I will try these. If it will be success, I push to this pr 👍

kyu-suke commented 5 years ago

@BcRikko

I updated!

Description

Hide radio and checkbox without accesibillity loss in iOS.
- Set 1px to these width and height. (for accesibillity)
- Set same color as background(default, is-dark) to these background.

view radios

accesibillity

There may be points I have missed. If you have any opinion please.

thanks!

BcRikko commented 4 years ago

:tada: This PR is included in version 2.2.1 :tada:

The release is available on:

Your semantic-release bot :package::rocket: