CODEWITHSUNDEEP
csscss-selectors
mike
mike

Reputation: 486

Add :after to :enabled CSS pseudo-class

Is it possible to add an :after pseudo element to :enabled pseudo-class of certain types/classes only in pure CSS?

As a sample, based on your feed-backs, I wish to have no border around the disabled radio (forgive me for not centering the :after elements): https://jsfiddle.net/msdobrescu/z398jjoj/20/

Upvotes: 0

Views: 155

Answers (3)

Stickers
Stickers

Reputation: 78706

The :enabled CSS pseudo-class represents any enabled element. It's commonly being used on form elements I believe. Unless you declared :disabled to the element, otherwise :enabled is the default state.

Also most of the form elements don't allow to have any pseudo elements such as <input>, <select>, and <textarea>... but some are allowed, such as <button>.

button:enabled:after {
  content: "*"
}
<button>Button</button>
<button enabled>Button</button>
<button disabled>Button</button>

For elements that don't have pseudo elements, you can use sibling selector + or ~ with a span tag to achieve the same results. 

input[type="radio"]:enabled + span:after {
  content: "*"
}
<input name="test" type="radio"> 1 <span></span>
<input name="test" type="radio" enabled> 2 <span></span>
<input name="test" type="radio" disabled> 3 <span></span>

Examples based on your code, also made the radio in the center of the circle.

  • jsFiddle - plain CSS with modified markup structure.

  • jsFiddle - with jQuery and original markup structure.

Upvotes: 2

Mr. Alien
Mr. Alien

Reputation: 157374

You cannot do that. You cannot add :before or :after pseudo on form elements. Basically they render inside container elements.

The best you can do is have an empty element besides your input, say a span and use a selector like

input[type=text]:enabled + span:after {
  /* Props goes here */
}

Upvotes: 2

PapaSoft
PapaSoft

Reputation: 53

The :after can work only with elements that have closing tags + It doesn't work with tag <select>. And as :enabled is usually used with forms, it will not work together.

If you work with form It's easier to wrap its elements in <div> and then just add :after to it.

You may also share your code for better understanding of a problem.

Upvotes: 1

Related Questions