Attempting to retrieve the styling for the placeholder attribute of a specific element

Question

Attempting to retrieve the styling for the placeholder attribute of a specific element

I am currently working on a project for a company's website that utilizes placeholder attributes.

My main goal is to extract the color styling from this SPECIFIC ATTRIBUTE only, rather than from the input element itself.

The style is applied using --webkit-input-placeholder:

::-webkit-input-placeholder {
        color: red;
    }

However, my attempt to retrieve the value through JavaScript has yielded an incorrect result:

var color = window.getComputedStyle(document.querySelector('[class=abc]'),
'::-webkit-input-placeholder').getPropertyValue('color');

Instead of getting the expected color:

rgb (255, 0, 0)

I am receiving:

rgb (0, 0, 0)

For reference, I have created a fiddle showcasing this issue: https://jsfiddle.net/darnold24/6q1pr5cf/

If anyone could provide assistance, it would be greatly appreciated. Additionally, I do have access to jQuery, although based on my understanding, it may only retrieve properties of elements and not attributes.

javascript html css

Answer 1

Answer №1

It's quite surprising that accessing a pseudo element style defined in your own CSS can be challenging.

However, there is a workaround by looping through document.styleSheets:

var st= document.styleSheets;
for(var i = 0 ; i < st.length ; i++) {
  var rules= st[i].cssRules;
  for(var j = 0 ; j < rules.length ; j++) {
    var css= rules[j].cssText;
    if(rules[j].selectorText.indexOf('::-webkit-input-placeholder') > -1) {
      console.log(rules[j].style.color);  //red
    }
  }
}

::-webkit-input-placeholder {
  color: red;
}

<input id="myPlaceHolder" class="abc" type="text" placeholder="Sample Placeholder" />

Answer 2

It's quite surprising that accessing a pseudo element style defined in your own CSS can be challenging.

However, there is a workaround by looping through document.styleSheets:

var st= document.styleSheets;
for(var i = 0 ; i < st.length ; i++) {
  var rules= st[i].cssRules;
  for(var j = 0 ; j < rules.length ; j++) {
    var css= rules[j].cssText;
    if(rules[j].selectorText.indexOf('::-webkit-input-placeholder') > -1) {
      console.log(rules[j].style.color);  //red
    }
  }
}

::-webkit-input-placeholder {
  color: red;
}

<input id="myPlaceHolder" class="abc" type="text" placeholder="Sample Placeholder" />

Attempting to retrieve the styling for the placeholder attribute of a specific element

Answer №1

Similar questions

A step-by-step guide on setting up flow types for @material-ui/core version 4

Execute a series of repetitive HTTP GET requests and remain patient for all of them to complete

CSS is disabled for the Transformation Translate feature

Is it feasible to maintain a variable as a reference across views while utilizing ng-view?

Prevent the user from selecting an option if the value is already present

Deactivating the submit button after a single click without compromising the form's functionality

"Trouble ensues when OrbitControls fail to function properly while loading a

Display or conceal content based on checkbox status

Creating a sliding bottom border effect with CSS when clicked

JQuery: Checkbox keeps unchecking when switching between buttons

During the deployment of a ReactJS app, webpack encounters difficulty resolving folders

What is preventing the bundling of my CSS into the application?

What is the best way to align the right column section below the left column section on a reduced screen size in a responsive design?

Tips for displaying content from JavaScript onto a div element in HTML

Expand Tooltip on the Fly

Styling and Script Files on a JQuery Mobile Website

A guide on properly formatting an Array of Objects in JavaScript based on the contained data

Minimize the amount of ajax requests for quick search functionality

Displaying both input fields and buttons side by side on mobile devices using Bootstrap

What could be causing the spotlight in my three.js scene to stay centered in the camera perspective, but only when using Chrome on an Android device?