Comments (7)
I think it won't be possible to fix this in pure CSS.
A possible workaround is to use 98.css in a browser running on Windows 98 🙃
from 98.css.
Hello there.
I confirm that you cannot fully control select element styling in css3.
So far browsers do not allow for much styling of select options and it is OS specific.
In order to fully customize a dropdown styling, it would require a custom element and js like many library do.
Here is an example of "artificial" select using some library called "custom select"
So unless 98.css is willing to endorse a specific JS "team" (native/react/vue/angular...) i think this is up to the developer to do this.
98.css could however brings some tools in order to help with creating fully-customized dropdowns.
Inputs and scrollbars already exists, maybe we could create an actual dropdown component that is not a select tag. This can be seen for example with bootstrap dropdowns
Despite the look, these are actually css controlled by one .open
class toggled by some js.
In any case, this is not possible to get the exact styling of select options at the moment 🙂
from 98.css.
Definitely letting the OS render the dropdowns..
Probably intentional for accessibility purposes tbh
from 98.css.
Definitely don't get into the headache of figuring out the select components tbh, even with JavaScript it's a huge pain (didn't the guy who begun react-select do a talk specifically about how it was a huge ordeal he'd've never considered starting if he had known in advance) and will make people using it on mobile really hard
from 98.css.
Yep, you're right, I'm using the native one!
Some other limitations of my approach:
- I can't put a blue background on just the selected text, I have to make the entire background blue 😱
- I can't detect
:active
on just the arrow, so it'll have a pressed appearance when you click anywhere on the select.
As mentioned above I am not sure how to solve this in pure CSS! I would be game to introduce a more complex select built with buttons and aria-expanded, to be driven by the user's JS framework of choice.
from 98.css.
What about with ::after and ::before hacks?
from 98.css.
What about with ::after and ::before hacks?
I was going to propose just that, select in Windows are in fact a combination of textbox and a button...
from 98.css.
Related Issues (20)
- Pressing on the npm link on the website pops a save password prompt HOT 1
- Y's in text box fall below text box
- 98.css import wrapper component instead of applying to whole application HOT 4
- White background and overflow with 98.css elements since recent preview build HOT 4
- I can't change scrollbar button HOT 1
- Input type="number" arrows overflow off the input HOT 6
- Not really an issue but how to center text? HOT 4
- I create a minesweeper game based on 98.css HOT 4
- TableView JS logic is broken in demo site HOT 2
- Will there ever be a progress bar? HOT 2
- Tabs have a default font
- Active tab doesn't have dotted line HOT 1
- Linting and formatting standards
- "é" changing text color HOT 1
- Add support for input type "search" HOT 1
- blurry text? HOT 5
- buttons don't color correctly(?) + idk how to size title bar buttons HOT 1
- Any way we can set window to full width and height? HOT 1
- Add documentation for blurry text when pixel offset isn't a precise integer
- Scale UI components with font-size using em units, remove hardcoded px units
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from 98.css.