Cursor:Pointer on Pseudo Element Ie

div{    font-size:2em;    position:relative;    display:inline-block;        /* remove ability to interact with parent element */    pointer-events: none;
    /* apply pointer cursor to parent element */    cursor:pointer;
    /* make it more obvious which is child and which parent for example*/    background: darkred;}div::before{    content:'X';
    display:block;    text-align:right;
    /* restore ability to interact with child element */    pointer-events: auto;        
    /* make it more obvious which is child and which parent for example*/    width: 30px;    text-align: center;    background: white;}

<div>some text</div>

cursor: pointer doesn't work on :after element?

Instead of setting the cursor: pointer on the :after element, set it on the entire li and it will show up on both.

Edit:
For those of you trying to have different cursors on the li and its :after pseudo-element, you simply need to explicitly define the cursor property of the content inside the li. See this updated fiddle: http://jsfiddle.net/qKMPQ/20/

<ul>
    <li>
        <a href="#"></a>
    </li>
</ul>

ul { list-style-type: none; }
li { cursor: pointer; }
a {
    background: red;
    float: left;
    width: 100px;
    height: 100px;
    cursor: help;
    display: block; }
li:after {
    content: "";
    background: yellow;
    float: left;
    width: 100px;
    height: 100px;
    display: block; }

Is there a way to prevent the pointer/cursor from interacting with elements behind a select element using CSS?

As said in my comment already, the question Bad cursor in select/option, IE has an answer that suggest a rather complex JS solution.

Something a little simpler might be accomplished like this:

<span><select>
/* options here */
</select></span>

span {
    position:relative;
    z-index:0;
}
span:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:rgba(255, 0, 0, .25);
    z-index:-1;
}

We put a span around the select element, and then position a pseudo-element underneath the select that has cursor:pointer set. That makes the cursor stay pointer even when the lower options are hovered. Edit: Actually, I used cursor:pointer in an earlier version, but then I realized that the cursor IE uses for the select options is a different one, and setting cursor doesn’t seem to be necessary at all – that the element the mouse pointer is over does not have any direct text content seems to be enough already.

(You might want to increase the height of the pseudo element when there’s more options.)

The background color is not needed, I put that in only so that it’s clearly visible where the pseudo element is located. Remove the background, and it’ll still work the same.

One little drawback: That pseudo element has to lay on top of the following content on the z-axis, otherwise the paragraph will “take over” again, and we have the same issue as before. Since usability might suffer from that (can’t start selecting text underneath that pseudo element, focusable elements under it won’t be clickable), here is another version that only makes that element visible when the select has focus:

<span>
  <select>
  /* options here */
  </select>
  <span></span>
</span>

span {
    position:relative;
    z-index:0;
}
span span {
    display:none;
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:100px;
    background:rgba(255, 0, 0, .25);
    z-index:-1;
}
span select:focus + span {
    display:block;
}

http://jsfiddle.net/CBroe/y4k35rqn/1/

This uses the adjacent sibling combinator to make the element only show up when the select has focus – that’s why I used an extra span element here, because otherwise I would have no “next sibling” to target from the focused select.

(Of course this doesn’t work so nicely when you absolutely need your select to have autofocus attribute set, why I removed it here. Maybe that’s a compromise you’re willing to make. Or maybe it doesn’t hurt if the element is displayed on page load, since the user will have to remove focus from the select before they can interact with other elements anyway. Your choice.)

To anonymous element add pseudo element and cursor style and event listeners

It doesn't seem like these nested, anonymous xul:image nodes support (::before) pseudo-elements at all. Or maybe it is because the toolbarbutton binding is display="xul:button"... Somewhere deep inside the layout engine the parent element outright refused to adopt the generated ::before pseudo-element, my debugger says. Remember that XUL != HTML.

However, you can bind and/or rebind stuff to a new binding.

I used this CSS to re-bind and style the sync button (analog to your example from the question comments, but not meant to be a pixel-perfect reproduction):

#PanelUI-fxa-status {
  -moz-binding: url(toolbarbutton.xml#toolbarbutton);
}
#PanelUI-fxa-status .toolbarbutton-badge {
  list-style-image: url(chrome://browser/skin/places/query.png);
  transform: translate(8px,8px) scale(0.7);
  border: 1px solid red;
}

And the new binding, based on the default binding:

<?xml version="1.0"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<bindings
   xmlns="http://www.mozilla.org/xbl"
   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
   xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="toolbarbutton" display="xul:button" role="xul:toolbarbutton"
           extends="chrome://global/content/bindings/button.xml#button-base">
    <resources>
      <stylesheet src="chrome://global/skin/toolbarbutton.css"/>
    </resources>

    <content>
      <children includes="observes|template|menupopup|panel|tooltip"/>
      <xul:stack>
        <xul:image class="toolbarbutton-icon" xbl:inherits="validate,src=bage,label"/>
        <xul:image class="toolbarbutton-badge" xbl:inherits="validate,src=image,label"/>
      </xul:stack>
      <xul:label class="toolbarbutton-text" crop="right" flex="1"
                 xbl:inherits="value=label,accesskey,crop,wrap"/>
      <xul:label class="toolbarbutton-multiline-text" flex="1"
                 xbl:inherits="xbl:text=label,accesskey,wrap"/>
    </content>
  </binding>
</bindings>

You could either set the badge with CSS, as I did, or using <toolbarbutton ... badge="{url}"/> (i.e. the src=badge inheritance in the binding).

Regarding the addEventListener/cursor stuff: It is not quite clear here what exactly you are asking for?

You can use all the usual methods with the toolbar button (addEventListener, command=/oncommand=, ...), but not with child elements of it.

You can use cursor: styles with the toolbarbutton, but not with child elements of it.

Both are due to display="xul:button" in the binding. If you don't want that, you'll need to modify the binding not to use a display= and fix any stuff that breaks.

Why is cursor:pointer effect in CSS not working

You need to change the z-index so that #firstdiv is considered on top of the other divs.

IE crossing out pseudo element CSS?

This is a known issue, but the styles are in fact being applied. The developer tools thinks the pseudo-element styles are being overridden by the parent-elements corresponding styles. This is easily demonstrated by inspecting the Computed style of the parent-element and looking at (what the F12 tools believe to be) competing styles:

Again, however, these styles are in fact being applied to the correct elements - regardless what the developer tools believe or suggest. You can confirm this by running over the parent-element and the two pseudo-elements and logging their computed height:

(function () {

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) {
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    });

}());

I'll check to see if we already have an internal issue tracking this bug, and add this question to it. Generally speaking, we try to give issues like this the amount of attention proportional to the amount of grief the issue is causing in the real world. So having your question as a new addition on the ticket may help us move a fix forward :)

Click on event causing change in pseudo class style

You could add a class to the slider on click and then use CSS to hide the pseudo ::-webkit-slider-thumb element. Interacting with pseudo elements/selectors in JS can be a bit tedious

.jspsych-slider {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  background: transparent;
}
.jspsych-slider::-webkit-slider-thumb {
  border: 1px solid #666;
  height: 24px;
  width: 15px;
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9px;
}
.jspsych-slider.hidden::-webkit-slider-thumb { visibility: hidden }

function(){
  document.querySelector('.jspsych-slider').addEventListener('click', function(e){
    e.target.classList.add('hidden')
  })
}

---

Related Topics