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

[ciruz]

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:

.it-form input[type=file]::file-selector-button {
  /**/
}

Because of the naming of the pseudo selector ::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:

.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:

.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).
• [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

[arnabmindpath]

facing same issue with the ::file-selector-button styling do fix this issue in next release

[lidocaine]

Just came across this issue today; very disappointing.

[rejittiachan]

Yeah, its very disappointing. But I found a way to trick Elementor. :) Just add an HTML code block in the page and add this code:

And it is working.

[lioncatde]

same issue here

[lioncatde]

Yeah, its very disappointing. But I found a way to trick Elementor. :) Just add an HTML code block in the page and add this code:

And it is working.

seems to work, but I can't get the ::file-selector-button:before and ::file-selector-button:active to work. Any ideas?