elementor / elementor/elementor

🐞 Bug Report: Elementor selector interferes with pseudo element `::file-selector-button`

Open
#21,835 7 comments 6 reactions 0 assignees View on GitHub
bug component/pro/custom-css mod/b*
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.