I want After click on the radio,
Radio-selected that background color is yellow putting background label, with use of css no js.
how is it?
Example of myself: http://jsfiddle.net/DVJmS/6/
Example of ui: http://jqueryui.com/demos/button/radio.html -> I not want use of plugin this is only a example.
Volia
What you need to do is:
wrap each <input /><label></label> in a <div>
give input[type="radio”] a width and height of 0px
Then add this rule to your css :checked ~ label {
background: #f00;
}
What that last one does is says if there’s a sibling of mine that is checked preceding me then make me have a background of #f00. Just change the alignment and colors to fit your site.
Also, you should never give two elements the same ID. If you want to be able to select two elements at once always uses classes.
Related
I'm trying to make a dark theme via css for Tiktok's Chrome site and I'm having some trouble making the like button visable on the black background.
i tried using Filter:invert(1); and that worked but when you like the comment the red color is now teal.
tiktok doesn't use different divs for the different imgs so when i filter the black heart it filters the red one too. all tiktok does is switch the image links in the src. i want to specify the black img link in css to isolate it so i can filter that one and that one only.
This is the HTML of the red like button.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg" class="jsx-1998704864 icon">
This is the one i want to isolate in css.
<img src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg" class="jsx-1998704864 icon">
This is what i have in my css
.like-container.jsx-1998704864 .icon.jsx-1998704864{
filter:invert(1);
}
Since you're not able to use JavaScript, your best option is to use attribute selectors. Please note that the source is probably very likely to change, since those classnames for example seem to be auto generated by some compiler. Same goes for the image URL.
To select the unlike button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/unlike-c0928a8c3ac7b448ef79c4bb26aec869.svg"] {
/* your unlike button style */
}
For the like button use
img[src="https://sf16-scmcdn-va.ibytedtos.com/goofy/tiktok/web/node/_next/static/images/liked-c7cae6d877d0cceec83f13891a4a8836.svg"] {
/* your unlike button style */
}
EDIT (after 15 mins):
If you want to select any image tag which contains the word "unlike" you can also use this:
img[src*="unlike"] {
/* your unlike button style */
}
I have an animated flip SCSS checkbox, and I have 2 issues I cannot solve:
a) I wish to have a dynamic width, based on content and not static.
The problem is that I have 2 contents, one for 'checked' and one for 'unchecked'
b) I wish to add both icons (using fontawesome 5) and text, not exclusive (I mean an Icon+Text).
In the worst case, I wish a way to use either the icon, either the text
Here is how I define it:
<input class="btn-toggle btn-toggle-flip" id="cb5" type="checkbox" />
<label class="btn-toggle-label" data-tg-off="UNSAVED" data-tg-on="SAVED" for="cb5"></label>
The SCSS is too long, the best is to look at the sample here:
https://codepen.io/cdemez/pen/QWjXRjw
For both issues, search for the text 'data-tg-off' into the SCSS please ;-)
Do you have any idea?
Thx
In order for :before and :after content to appear you need to set the width on your label element as there is no content inside your label (logically empty), only then you should be able to see the pseudo elements as the pseudo elements are rendered inside the element before and after the content of the element.
Also, for font-awesome to appear you need the unicodes of the icons that you want to show so that you can pass them as html attribute to css, but also you need to explicitly set the font-family for the pseudo elements which will make your text look weird. Two main things that solve your use cases are:
For icon to appear inside label & for dynamic widths of pseudo elements:
HTML
<label class="btn-toggle-label" data-tg-off="UNSAVED " data-tg-on="SAVED  " for="cb5"></label>
CSS
.btn-toggle-flip {
+ .btn-toggle-label {
&:after,
&:before {
width: auto;
max-width: 100%;
font-family: "Font Awesome 5 Free";
}
}
.btn-toggle-label {
width: 200px;
}
I've tried this workaround for both your use cases here, checkout this pen:
https://codepen.io/mudassirzr/pen/XWmvrWp
I've been looking for a way to easily style checkboxes even in those cases where I don't have labels but I haven't found any answer that completely satisfied me so I decided to try and find a way by myself so that all the others might find it useful.
This is what I ended up with.
CSS Checkbox without label
What I do is basically style the after elements and set pointer-events to none so you'll be able to click true the after element.
This allows us to let the checkbox handle the click and change its state from checked to unchecked and we'll then style the after element depending on the checkbox state.
This will be the unchecked style
.check:after{
pointer-events: none;
background: white;
content: ...
....
}
And then we'll have our checked style
.check:checked:after{
background: green; /* Change background and maybe image */
....
}
Please notice that the original checkbox will be still visible under the after element since we can't hide it (hiding it will end up hiding after and before elements too) so you can't play with transparency on your after element but you can still play with background image position and background color as I did in the example.
I hope this will help you with your styles! :)
I have an image with buttons overlain on it. Because the buttons are semitransparent, and I don't want the labels to be, I've overlaid a span on each button (with 100% opacity). To make sure that the spans don't intercept all the clicks, I used the pointer-events: none; css property on the spans.
Here's the structure of the markup (Jade):
div.slide
div.controls.buttons
button.move.forward
button.move.back
button.info
div.controls.icons
span.move.forward.icon.ion-chevron-right
span.move.back.icon.ion-chevron-left
span.info.icon.ion-information
.icon.ion-* are styles for the ionicon icon font
It looks like this when rendered:
The problem is, that because I have pointer-events:none;, I can't use :hover or :active on the .icons span. Is there a way to propogate the click event to the element below without using pointer-events: none?
Am I going to have to put a listener on each button then trigger the click event using javascript? Or is there a nicer way?
Codepen example here
I'm trying to use the css hover, and I have it working on a div by doing:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
my question is, is there a way to target another html element, like a totally unrelated div, when I hover over the property with the ID of complete-paper? So when you hover over the div with complete-paper, it'll do the above hover css changes, as well as change another div on the page?
Thanks
Edit: The question I had is if it's possible if the div's are unrelated. But in this case they are related, It's actually a p inside a div when you hover over the div, I want the p to also change
Not unless the other div is nested in #compete-paper where the css would look like:
#complete-paper:hover{
background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
}
#complete-paper:hover .other-div{
/* different css */
}
Not unless the other div is a descendant or sibling of the hovered element.
Since you said it's a descendant, then do it like this:
#complete-paper:hover #decendant_id {
// stuff
}
While the actual HTML elements in the file must be either nested or contained in a single element to be valid ':hover' targets to each other, the css 'position' attribute can be used to display any element where ever you want. I used position:fixed to place the target of my ':hover' action where I wanted it on the user's screen regardless to its location in the HTML document.
So the element is where the browser wants it in the code, and where the user wants it on the screen.
See detailed post->