Comments (7)
Hello @MustafaBaban thanks for this issue.
The problem you are experiencing is related to CSS specificity. The Ionic Framework implementation applies the styles to an .input-fill-solid
class that has a higher specificity than your .custom-input
class.
Applying a more specific selector, such as:
.custom-input.md {
will result in the styles applying as expected.
from ionic-framework.
I plan on creating a pull request for this Issue
from ionic-framework.
Thank you for your quick answer and guidance on the CSS specificity issue
While your suggestion is valid, it requires an additional class not mentioned in the documentation.
To maintain consistency with the Ionic documentation and improve developer experience, may I propose submitting a PR myself to address this?
I believe a slight adjustment could help others facing the same issue, ensuring styles apply as expected without extra specificity. Would that be ok?
from ionic-framework.
@MustafaBaban could you share what your suggestion for a PR would include? I want to make sure you aren't investing time into a path we may not accept.
from ionic-framework.
Hey @sean-perkins,
It looks like I won't be able to get to that PR. Really sorry about that. I was looking forward to contributing, but it seems like it's not in the cards right now.
I'm still hoping the issue with the ion-input fill custom CSS properties gets some attention. Just won't be able to tackle it myself at the moment. Sorry <3
from ionic-framework.
@MustafaBaban can you share what your suggestions would have been? At this time I do not believe this to be a bug with Ionic Framework and plan to close as a result.
CSS specificity is expected when targeting element selectors that Ionic Framework internally styles.
from ionic-framework.
Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.
Thank you for using Ionic!
from ionic-framework.
Related Issues (20)
- bug: buttons inside `ion-header` not accessible with screenreader (unless scrolled down) HOT 1
- bug: Keyboard interaction on device with inputs/buttons inside of swiper HOT 1
- bug: unintended re-focus to input after selecting clear input button with iOS VoiceOver HOT 5
- bug: ionic8 Conflict between font color and theme color in new dark mode HOT 2
- bug: Auto foucs in ios not work (ionic vue) HOT 1
- feat: Export files in `utils` in distribution HOT 1
- bug: swiper inside ion-content not recognizing dir="rtl" when rendered dynamically HOT 3
- bug: iOS Modal Drag Animation Glitches HOT 2
- feat: Expose ion-input/ion-searchbar value as a signal in Angular HOT 1
- feat: ion-searchbar helperText HOT 6
- bug: ion-input debounce is not set with binding syntax on initial load HOT 4
- bug: iOS - Tap on status bar doesnโt scroll to top HOT 3
- feat: status bar dark in dark-mode HOT 4
- bug: item borders effectively invisible in md dark mode HOT 3
- bug: bundle size increase with IonicModule and lazy loaded web components in v8.0.1 HOT 4
- bug: root remains `aria-hidden` after dismissing multiple overlays consecutively
- bug: IonPage occasionally doesn't render when navigating quickly
- [TRAINING] bug: ion-input retained in memory after removed from DOM
- CapacitorHttp FormData Not Supported on Android Device but it working fine on ionic serve(browser) HOT 1
- bug: Keyboard expansion unable to push bottom elements HOT 1
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 ionic-framework.