pseudo-element

问题 How I can change CSS for a pseudo element style? I am trying to get the CSS before:: rule and change left: to 95% or 4px . How can I perform this in my context? I've also made some test using document.querySelector but it doesn't work, I get a compute Read-Only error. Do you have suggestions? Example: css .iziToast-wrapper-bottomLeft .iziToast.iziToast-balloon:before { border-right: 15px solid transparent; border-left: 0 solid transparent; right: auto; left: 8px; } js if(description_iziToast)

问题 This question already has answers here : CSS content generation before or after 'input' elements [duplicate] (5 answers) Closed 3 years ago . I'm trying to put some content before an input tag using CSS pseudo-class ::before . It works in Chrome but not in Firefox. What seems to be the problem with Firefox? Here's a snippet: input::before { content: ''; display: block; width: 13px; height: 13px; border-radius: 50%; box-shadow: 0px 0px 5px #9F0002 inset; } <input type="radio" name="gender"

问题 I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size. In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values). It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop

问题 I would like to customize input type range like this. I tried to use the following code to change the thumb and as below but selected range color is not changed. HTML : <input type="range" /> CSS : input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; border-radius: 10px; background: red; cursor: pointer; border: none; margin-top: -8px; } input[type=range] { -webkit-appearance: none; outline: 0; margin: 0; padding: 0; height: 30px; width: 100%; } Could

问题 First time really using the pseudo :after selector. Not sure if the problem I'm running into is a limitation of it or I'm just missing something obvious. Here's my live code . li.current:after { border-width: 1px 1px 0 0; content: ' '; background: #256f9e; display: block; height: 13px; position: absolute; width: 10px; top: 6; margin:0px auto; z-index: 99; transform: rotate(-224deg); -webkit-transform: rotate(-224deg); -moz-transform: rotate(-224deg); -ms-transform: rotate(-224deg); -o

问题 I'm trying to get some UI flagging on form elements for the user after validation to work using the placeholder pseudo elements (starting with text boxes). What I want is the ::input-placeholder::after pseudo element to be shown when there is both a value in the text box as well as when there isn't a value in the text box (e.g. when an invalid value is present or when a value is required - should show the red "X" in the far right of the textbox via the ::input-placeholder::after pseudo

问题 I am trying to override the font of all headers, input, select, text area and input placeholders on my site with the following code: h1, h2, h3, h4, h5, h6, button, input, select, textarea, :-ms-input-placeholder, ::-moz-placeholder, :-moz-placeholder, ::-webkit-input-placeholder { font-family:some font name; } The problem is, for some reason it isn't working on Chrome. If I delete the :-moz and :-ms references, then chrome works fine, which leads me to believe that Chrome doesn't like pseudo

问题 I'm having some difficulty finding a solution to style a hr element to my preference. If you look at the following fiddle you will see the hr element has both :before and :after pseudos added to it. http://jsfiddle.net/MattStrange/LGEjp/ So far this is what i want, both circles on either side is correct but now i want to add an image to the exact center of the line, but because both pseudos are taken up i'm not sure how to add a background image to this hr. <hr class="bolt"> hr { border: 0

问题 There are a few references on the internet to ::-webkit-selection , a WebKit-specific version of the ::selection selector. See e.g. http://www.quirksmode.org/css/selection.html ( Edit: PPK has since removed ::-webkit-selection from that page.) However, I haven’t been able to get the example in the page above, or my own examples, to work in any WebKit-based browser. I’ve tried: Safari 1.0 1.2 2.0 3.0 4.0 5.0 5.1 Chrome 2 6 14 The unprefixed ::selection selector works in all of these browsers

问题 There are a few references on the internet to ::-webkit-selection , a WebKit-specific version of the ::selection selector. See e.g. http://www.quirksmode.org/css/selection.html ( Edit: PPK has since removed ::-webkit-selection from that page.) However, I haven’t been able to get the example in the page above, or my own examples, to work in any WebKit-based browser. I’ve tried: Safari 1.0 1.2 2.0 3.0 4.0 5.0 5.1 Chrome 2 6 14 The unprefixed ::selection selector works in all of these browsers