Issue with empty attribute selector not functional in Edge browser

In my current version of Edge, I am facing an issue where the empty attribute selector is not functioning correctly. You can find more information about this problem here.

The selector I am using is:

[ct-validation]:not([ct-validation=""]) {
  border-color: red;
}

The ct-validation attribute contains an error message. Whenever the error message is present, a red border is applied to the element. This works perfectly in all browsers except for Edge (40.15063.0.0). Unfortunately, upgrading is not an option for me due to restrictions set by Corporate IT.

Is there an alternative method to check if an attribute is empty using CSS only?

cssmicrosoft-edge

Answer №1

I haven't verified if this method works in the actual Edge browser, but Manipulating the user agent in both Chrome dev tools and Edge dev tools can achieve the desired outcome by simply cascading the styles:

Here is the user agent for reference:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/15.15063

Take note of the various examples it encompasses:

[ct-validation] {
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
}

[ct-validation=""] {
  border-color: red;
}
<div ct-validation="">bad</div>
<div ct-validation="    ">bad</div>
<div ct-validation>bad</div>
<div ct-validation>bad</div>
<div ct-validation="abc">good</div>

Update: I have tested the same method in Edge dev tools by overriding the user agent to v15.15063

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

"Border-radius becomes less prominent on pointer interaction in Chrome and Safari due to WebKit's behavior

Having an issue with a list inside a div. The problem arises when there is a div containing a list, which limits the visibility of items for users. If the limit is exceeded, a scroll bar appears inside the div to allow users to see more items. Additionally ...

google-chromesafariwebkitcss

Disorganized jQuery Animation

Looking for some help with an animation I have on my website. The animation is supposed to smoothly move in and out when the mouse cursor hovers over it, but as you can see, it's a bit messy. This project involves HTML, CSS, and jQuery <!DOCTYPE ...

jquerycsshtmlanimation

How can I modify the color scheme of radio buttons to include a variety of different hues?

Is there a way to customize the colors of my radio buttons with three different options? I want numbers 1, 2, and 3 to be red, number 4 to be orange, and number 5 to be green... Here is the code I am using: /* Option 1 */ input[type='radio'] { ...

css

What steps do I need to follow in order to replicate the layout shown in this

I am struggling with creating a layout in CSS that resembles the one shown in this photo: enter image description here Here is the HTML structure I have, but I can't figure out how to style it properly. <ul class="list"> ...

htmlcsslayout

Chrome is inaccurately reporting the outerHeight value, while IE and FireFox are displaying it correctly

The jquery.smartWizard plugin includes a function called fixHeight that adjusts the height of a wizard step. It is utilized when displaying a step for the first time or revealing hidden divs within the step. The function works correctly in IE and FireFox, ...

javascriptjquerycssgoogle-chromesmart-wizard

Investigating nearby table cells

I am in the process of creating a game called Dots and Boxes. The grid is filled with numerous dots: <table> <tr> <td class="vLine" onclick="addLine(this)"></td> <td class="box" ...

javascripthtmlcss

Steps to eliminate the active state of a button after clicking on an input

I am currently working on a component that consists of 4 preset buttons and a customized range input. The issue I am facing is that while I can toggle the active state on the buttons when they are clicked, I want to remove the active state from all the but ...

javascripthtmlcssformsbootstrap-4

The header and navigation bar are both set to stay in place, but unfortunately my div element is not displaying beneath

After setting both the Nav and Header to fixed, everything seems to start out well. I adjust the Nav margin-top so that it appears below the header, which works fine. However, things take a wrong turn when I try adjusting the div. The div ends up behind th ...

htmlcss

Loading screen for specific content within the current WordPress theme

I am trying to display a preloader only in the 'content' div, but it ends up hiding the entire page. The structure of the site is as follows: Title Menu Content (where I want the preloader) Footer I'm having trouble figuring out where exa ...

javascriptjquerycsswordpresspreloader

Styling <Link> component with styled-components: A step-by-step guide

Utilizing the Link component from @material-ui/core/Link in my TypeScript code was initially successful: <Link href="#" variant="body2"> Forgot? </Link> However, I am exploring the transition to styled-components located in a separate file. ...

javascriptcssreactjstypescriptmaterial-ui

Struggling with formatting images to ensure consistency in size using HTML and CSS

Currently, as a novice in HTML and CSS, I am encountering image misalignment issues while attempting to make them uniform in size. How can this be rectified? The existing HTML code is shown below: <div class="container text-center"> <h3> ...

htmlcss

The table populated by Ajax is blank

I am facing an issue while trying to display a table using AJAX and PHP. The table is not appearing in the designated div. Since I am new to AJAX, I have limited knowledge about its functionalities. Below is the HTML code for my div: <div class="body" ...

phpjqueryhtmlcssajax

Use the mouse scroll to navigate and scroll a vertical-rl div from right to left

Here I have created a vertical-rl environment; (function() { function scrollHorizontally(e) { e = window.event || e; var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))); document.documentElement.scrollLeft -= (delta * 50); ...

javascripthtmlcss

How can you adjust the width of the Material UI Select component?

Trying to customize the width of the Material UI Select component can be a bit tricky. To set the desired width, you need to assign a specific class to the FormControl component. This class, such as mw-120, should define the minimum width as 120px in your ...

htmlcssreactjsmaterial-designmaterial-ui

The issue of jumpy CSS background on full screen mode for mobile devices is causing

While developing a web app, I encountered an issue with the responsive (parallax) full screen background. On mobile devices, the background does not extend below the toolbar, causing a jumpy effect when scrolling up and down in Firefox. I have tried differ ...

cssmobile

Customize Zurb Foundation: Applying styles to specific child elements based on current screen size (large, medium, small)

For wide displays, I aim to give a distinct border to each 7th element. However, on smaller screens, I wish to apply these styles to every 4th element instead. Is there a way for me to nest my styles within .small, .medium, and .large classes? ...

csszurb-foundationcss-selectorsdescendant

How can I place a submit button on a separate line using CSS?

Is there a way to position an input type=submit below a text area without relying on br tags or div elements? I'd prefer a solution using CSS. ...

cssinputnewlinesubmit

Transferring data from JavaScript to an HTML page

I'm currently developing a rock, paper, scissors game using HTML and JS. Here is the link to the complete code (CSS, JS, HTML): http://jsfiddle.net/fJw4R/. You can also view the game with images here: The functionality of the .math-module is working ...

javascripthtmlcss

"After completing the survey form, the User Details form is displayed upon clicking the submit button

In my Quiz, each question loads on a separate page with clickable options. Some questions may have multiple answers, including an "Others" option. At the end of the quiz, users need to fill out a form. Although I've created a survey form, I'm fa ...

javascriptjqueryhtmlcssforms

Is it possible to adjust the range of a range slider based on the selection of a radio button or other input method?

I have a query and I’m hopeful you can assist: function UpdateTemperature() { var selectedGrade = $( "input[name='radios']:checked" ).val(); $( ".c_f" ).text(selectedGrade); var value1 = $("#tempMin").val(); var value2 = $("#tempM ...

javascriptjqueryhtmlcssmaterialize