elementor / elementor/elementor
🐞 Bug Report: Elementor selector interferes with pseudo element `::file-selector-button`
- Dominant language
- PHP
- Stars
- 7.1k
- Forks
- 1.6k
- Avg merge
- 1d 5h
- Merged PRs (30d)
- 193
Description
### Prerequisites
- [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [X] The issue still exists against the latest stable version of Elementor.
### Description
We have following custom CSS in the Elementor Pro Global Custom CSS editor, to style the file input button:
```css
.it-form input[type=file]::file-selector-button {
/**/
}
```
Because of the naming of the pseudo selector [::file-selector-button](https://developer.mozilla.org/en-US/docs/Web/CSS/::file-selector-button), it interferes with elementors selector and elementor replaces some parts of the pseudo selector with his own custom individual class.
In the finished CSS, we end up with a CSS class like this, which does not work anymore:
```css
.it-form input[type="file"]::file-.elementor-kit-213-button{
/**/
}
```
It worked until today, we updated to the latest Elementor version today.
### Steps to reproduce
A test styling for you:
```css
.it-form input[type=file]::file-selector-button{
background-color: #000;
color: #fff;
font-size: 40px;
-webkit-appearance: none;
appearance: none;
}
```
### Isolating the problem
- [X] This bug happens with only Elementor plugin active (and Elementor Pro).
- [X] This bug happens with a Blank WordPress theme active ([Hello theme](https://wordpress.org/themes/hello-elementor/)).
- [X] I can reproduce this bug consistently following the steps above.
### System Info
```
== Active Plugins ==
Adminimize
Version: 1.11.9
Author: Frank Bültge
CMS Tree Page View
Version: 1.6.6
Author: Jon Christopher
Contact Form 7
Version: 5.7.5.1
Author: Takayuki Miyoshi
Contact Form 7 Multilingual
Version: 1.2.1
Author: OnTheGoSystems
Doubly
Version: 1.0.39
Author: Unlimited Elements
Duplicate Page
Version: 4.5.1
Author: mndpsingh287
Duplicator
Version: 1.5.3.1
Author: Snap Creek
Dynamic Visibility for Elementor
Version: 5.0.4
Author: Dynamic.ooo
Elementor
Version: 3.12.0
Author: Elementor.com
Elementor Pro
Version: 3.12.0
Author: Elementor.com
Favicon by RealFaviconGenerator
Version: 1.3.27
Author: Philippe Bernard
Flamingo
Version: 2.3
Author: Takayuki Miyoshi
Honeypot for Contact Form 7
Version: 2.1.1
Author: Nocean
Rank Math SEO
Version: 1.0.110.2
Author: Rank Math
Search & Filter - Elementor Extension
Version: 1.2.1
Author: Code Amp
Search & Filter Pro
Version: 2.5.13
Author: Code Amp
Smush Pro
Version: 3.12.6
Author: WPMU DEV
Snapshot Pro
Version: 3.3.2
Author: WPMU DEV
Table Addons for Elementor
Version: 1.3.0
Author: Iqbal Bary
Toolset Module Manager
Version: 1.6.9
Author: OnTheGoSystems
Toolset Types
Version: 3.4.16
Author: OnTheGoSystems
Unlimited Elements for Elementor (Premium)
Version: 1.5.58
Author: Unlimited Elements
WP Mailto Links - Hide & Protect Emails
Version: 3.1.2
Author: Ironikus
WP Migrate Lite
Version: 2.6.3
Author: WP Engine
WPML Multilingual CMS
Version: 4.5.14
Author: OnTheGoSystems
WPML String Translation
Version: 3.2.3
Author: OnTheGoSystems
WPMU DEV Dashboard
Version: 4.11.18
Author: WPMU DEV
```
Contributor guide
Assessment
This issue has not been assessed yet.