Employing a combination of distinct CSS selectors from various vendors simultaneously

I'm trying to style placeholder text in different browsers using vendor-prefixed selectors. When I use separate code blocks for each selector, it works fine. However, when I try to use a comma-separated list of selectors instead of repeating the CSS for each, it doesn't work. Can anyone shed some light on this issue?

This approach works: 
input[type=text]::-webkit-input-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]:-moz-placeholder {
   color: green;
}
<input type="text" placeholder="Placeholder Text" />
However, this method does not work: 
input[type=text]::-webkit-input-placeholder,
input[type=text]::-moz-placeholder,
input[type=text]:-ms-input-placeholder, 
input[type=text]:-moz-placeholder {
    color: green;
}
<input type="text" placeholder="Placeholder Text" />

Why is that?

csscross-browservendor-prefix

Answer №1

Regrettably, it is not possible.

Once the browser identifies a valid selector, it will halt the execution of any code following it.

Each browser only supports one of the vendor-prefixed selectors you are using, which means there is no browser where all three pseudo-selectors can be executed.

Nevertheless...

...you can work around this by using separate blocks for each vendor prefix. Here's an example:

input[type=text]:focus::-webkit-input-placeholder {
  color: green;
}

input[type=text]:focus::-ms-input-placeholder {
  color: green;
}

input[type=text]:focus::-moz-placeholder {
    color: green;
}
<input type="text" placeholder="Hello, world!">

If you have large amounts of code, consider using a preprocessor like LESS or SASS to efficiently duplicate the code in each block.

Answer №2

The grouping of selectors is not possible due to the fact that when a browser encounters an unfamiliar selector, it halts the execution for that specific block of code.

Vendor-specific selectors are unique to browsers that support them. If you combine them, every browser will pause executing the code block either at the initial selector or the subsequent one.

For instance:

input[type=text]::-webkit-input-placeholder,  /* Chrome / Opera / Safari */
input[type=text]::-moz-placeholder,           /* Firefox 19+ */
input[type=text]:-ms-input-placeholder,       /* Edge/IE 10+ */
input[type=text]:-moz-placeholder {           /* Firefox 18- */
    color: green;
}

Google Chrome, Safari, and Opera can identify the first selector but will stop interpreting this code block at the second selector exclusive to Firefox. The remaining browsers will halt execution at the initial selector.

Thus, each selector requires its own individual code block.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS - Struggling to identify the source of unwanted horizontal scrolling?

Recently, I've been attempting to make adjustments to a responsive website that utilizes media queries. Despite my efforts, whenever the site is viewed on a mobile-sized screen, it consistently requires horizontal scrolling regardless of the screen&a ...

csshtmlscale

Dropdown colorization

I want to create a dropdown menu in my black navbar, but the text color becomes blue and the background of the pop-up turns white, which clashes with my black background. I need it to be transparent while using Bootstrap v4.1.1 <nav className="navbar n ...

cssbootstrap-4react-bootstrap

Issue with Gmail failing to render CSS in HTML email (svnspam)

After successfully setting up and configuring svnspam, I noticed that the emails sent to my Gmail account are missing the colored diffs. When examining the original email using Gmail's view original feature, I found the CSS code as follows: <html ...

htmlcssemailgmail

What is the best way to ensure that all elements inside a Grid item extend to the bottom, except for the text?

I currently have four columns within a Grid container, each structured as follows: <Grid item> <Typography>Big Title 1</Typography> <Card className={classes.stretchMe}> <CardContent> ...

cssreactjsmaterial-ui

Creating a Burger Navigation Menu with CSS and HTML using Image Overlapping

I'm encountering an issue with the new website I created for my local Church. I followed a tutorial on building a burger menu using just HTML and CSS, which you can view here. The problem arises when I attempt to place an image below the navigation m ...

htmlcss

The Urdu font is experiencing issues with its right-to-left direction functionality

When displaying Urdu text in an HTML tag (span), the text is supposed to be written from right to left. To achieve this, I added direction:rtl to the CSS styling. However, there seems to be an issue as on the last line, it leaves empty space on the right. ...

htmlcssbootstrap-4

Position the <a> to the right side of the div

Is there a way to right-align the <a> element, which contains a Button with the text Push Me, within the <div> (<Paper>)? https://codesandbox.io/s/eager-noyce-j356qe This scenario is found in the demo.tsx file. Keep in mind that using ...

javascriptcssreactjsdommaterial-ui

How can I improve my current code for linking 3 text elements to specific divs when hovered? The code below is functioning, but I'm looking for a more efficient script

Learning jQuery can be a slow process for beginners, but with practice and dedication, it gets easier. I have 3 text elements in separate divs that I want to trigger the addClass function on another div when hovered over. Although my current code works, ...

jqueryhtmlcssaddclass

Ensuring that Bootstrap rows fill the entire height within a column

While working on a template with nested rows and columns in Bootstrap, the layout ended up looking like this: <div class="col-5"> <div class="row"> <div class="col-3 border border-secondary">Truck Number</div> ...

javascriptcssbootstrap-4

Automatically add shimmer with CSS styling

Is it possible to make the shine effect work automatically (without needing hover) every 5 seconds? http://jsfiddle.net/AntonTrollback/nqQc7/ .icon:after { content: ""; position: absolute; top: -110%; left: -210%; width: 200%; height: 200%; ...

jqueryhtmlcssanimationeffects

Animate the toggling of classes in jQuery

Here is a code snippet that I came across: $('li input:checked').click(function() { $(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000); }); This code is functioning correctly when the element is clicked for the first time. I ...

javascriptjqueryhtmlcss

The issue with the Material UI Drawer component is that it is casting a shadow even when

Having some trouble with the Material UI Drawer component. Whenever I try to display it on my webpage, it automatically focuses on the inner div, adding a shadow or border if the focus is anywhere else. Does anyone know why this shadow appears and how to r ...

htmlcssreactjsmaterial-uiz-index

Adding an event listener to the built-in arrow buttons on the `<input type=number>` element is a simple way to enhance user interaction

<input type="number" id="test"> I'm trying to figure out how to set an event listener for the two arrow buttons on the right of this number input field. Typically, we can use jQuery like: $("#test").on("cl ...

javascripthtmljquerycssevents

What is the best way to create a function that automatically resumes audio playback 3 seconds after the pause button is clicked?

I am looking to develop a basic webpage with an autoplay audio feature. The page would include a "pause" and "play" button. I aim to implement a function where clicking the "pause" button would stop the audio, but after 3 seconds, it would automatically re ...

javascriptjqueryhtmlcss

Having trouble with setting an image as a background in CSS for Nativescript on iOS?

In my NativeScript app, I am trying to set an image as the background using the CSS property background-image: url("res://ic_more"). It works perfectly on Android, but unfortunately, it does not display on iOS devices. I have confirmed that the image is l ...

cssnativescriptnativescript-angular

exclude parameter in parent stylesheet

Currently, I am customizing a child theme in WordPress and facing an issue with the search box placement. Instead of having it at the top of the header, I want to move it to the bottom. Therefore, I am looking to replace the #searchform { top: 2.8em; f ...

cssimportparent

Implementing a dynamic top navbar that transitions to the side on desktop with Bootstrap

I have been faced with the challenge of creating a responsive navigation bar that appears at the top on mobile devices and on the side on desktops. The issue arises when considering how to structure the rows and columns to achieve this. For mobile views, ...

htmlcsstwitter-bootstrapresponsive

How can I design a side navigation menu using Bootstrap?

I've come across various tutorials online on how to create a side collapsible menu, but they all involve a lot of code. I just need to toggle the visibility of a specific div within this structure: <div class="row"> <div class="col-md-2" ...

jqueryhtmlcsstwitter-bootstrap

`CSS alignment issues`

Below is the HTML and CSS code that I am working with: .divOuter { width: 50%; margin: 0 auto; } .divInner1, .divInner2, .divInner3 { border: 1px solid; float: left; width: 150px; height: 150px; margin-left: 3px; margin-right: 3px; ...

htmlcss

Block with vertical text covering entire height

I need to place an additional block with 100% height and vertical text (bottom-to-top direction) inside a variable height block, aligning it to the left side without using width and height calculations in JS. Is there a way to achieve this using CSS transf ...

htmlcsscss-transformsvertical-text