I have problem with my custom checkbox. I would like to change color to green on :hover and yellow on checked.
I tried almost 10 different ways :/ Someone could help me?
Code Pen
<body>
<div class="container">
<div class="form__checkbox">
<label for="accept" class="form__checkbox-label">I have read and accept the terms of use.</label>
<input type="checkbox" id="accept" class="form__checkbox-input">
</div>
</body>
CSS (SASS):
&__checkbox {
z-index: 2;
position: relative;
&-label {
cursor: pointer;
#include inputFonts();
margin-left: 46px;
padding: 0.5rem;
font-size: 1.6rem;
&::before {
content: "";
display: block;
position: absolute;
left: 2%;
top: 50%;
transform: translateY(-50%);
height: 20px;
width: 20px;
background-color: blue;
margin-right: 20px;
}
&:hover + &::before {
background-color: red;
height: 40px;
}
}
&-input {
position: absolute;
top: -999999px;
opacity: 0;
}
}
The selector &:hover + &::before will not work, because you are selecting the next element's psudo-element(+ &::before). What (I think) you want to do, is to change the current element's psudo-element.
I regards to the hover state, you can change this:
&:hover + &::before { // compiled to: .form__checkbox-label:hover + .form__checkbox-label::before
background-color: red;
height: 40px;
}
to this:
&:hover:before { // compiled to: .form__checkbox-label:hover:before
background-color: red;
height: 40px;
}
This will make the blue checkbox in your example turn red (with 40 px height) on hover.
Changing color based on checkbox state
In order to do this, you need to do a couble of things:
Rearrange the html
<div class="form__checkbox">
<!-- input first! -->
<input type="checkbox" id="accept" class="form__checkbox-input">
<label for="accept" class="form__checkbox-label">I have read and accept the terms of use.</label>
</div>
Add a css selector to your checkbox, targeting the "next sibling label" when :checked.
&__checkbox {
// abbreviated...
&-input {
// abbreviated...
&:checked + .form__checkbox-label:before {
background-color: green;
}
}
}
I back to this code, and now I have problem with change checked button. I would like to add grey background and show "checked bird".
I tried various methods and it doesn't work..
Again Link https://codepen.io/direct96/pen/eLXMXY
&__checkbox {
z-index: 2;
position: relative;
&-label {
cursor: pointer;
#include inputFonts();
margin-left: 46px;
padding: 0.5rem;
font-size: 1.6rem;
&::before {
content: "";
display: block;
position: absolute;
left: 15px;
margin-right: 50px;
top: 50%;
transform: translateY(-50%);
height: 23px;
width: 23px;
background-color: $form-text-color;
}
&::after {
content: "";
position: absolute;
display: none;
left: 4.5%;
top: 45%;
background: white;
width: 2.5px;
height: 2.5px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white,
4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
}
&:hover::before {
background-color: $color-input-focus;
}
}
Related
I have the following css file
body {
font-family: Baskerville;
background: #ecf0f1;
color: #2c3e50;
}
h1 {
margin: 16px 0;
padding-left: 16px;
border-left: 5px solid #e74c3c;
font-family: Baskerville;
font-size: 48px;
}
h3 {
margin: 16px 0;
padding-left: 16px;
color: #cccac4;
}
.container1 {
padding: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.container1 .checkbox {
padding: 8px 48px;
margin: 8px;
font-family: Baskerville;
font-size: 25px;
}
input[type="checkbox"]{
display: none;
}
label {
position: relative;
}
label::before {
content: "";
background: url("check-circle.svg");
background-position: center;
background-size: contain;
width: 32px;
height: 32px;
position: absolute;
left: -44px;
top: -8px;
transform: scale(0) rotateZ(180deg);
transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}
input[type="checkbox"]:checked + label::before {
transform: scale(1.0) rotateZ(0deg);
}
label::after {
content: "";
border: 2px solid #27ae60;
width: 24px;
height: 24px;
position: absolute;
left: -42px;
top: 1px;
border-radius: 50%;
}
This is a simple transform and transition where i rotate the img (check-circle.svg) in those 4 curve points of cubic-bezier , whenever it is checked or unchecked after. However the transition and transformation wont work. It will simply not show. Where am i mistaken ?
Are you sure you've placed <label>...</label> immediately after <input type="checkbox"/>? Code seems fine, although I'm not sure what is the purpose of input[type="checkbox"]{ display: none; }. Posting html would be nice too.
Also you can check if provided svg's url is correct. Try to replace it with some other svg url found on internet.
make sure that (label) is a direct next child of (input)
I am making a section which contains price info section and order now button.
Here, there is a wrapper border class that make the border for the entire section.
Scenario:
In this case consider that button is disabled with opacity and hence it looks like this now.
.border {
border: 4px solid rgb(195, 0, 38);
border-bottom: transparent;
}
.info-card {
padding-bottom: 20px;
}
button {
background-color: rgb(195, 0, 38);
opacity: 0.5;
border-radius: 10px;
color: #fff;
padding: 5px;
}
.order-button {
margin-top: -1.5rem;
}
<div class="border">
<div class="info-card">
<h1> Info Section </h1>
</div>
</div>
<div class="order-button">
<button>
Order Now
</button>
</div>
But the requirement is that the border line should go behind the button (and not above the button) as like the below image.
Expected Result:
Note: Here opacity is included to make the button look like disabled.
Also the color given above varies and so please don't include any other addition of colors.
Tried with increasing z-index of button but that doesn't work in this case.
Try this:
button::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
left: 0;
border-radius: 20px;
background-color: rgba(197, 218, 227,.5);
top: 0;
z-index: 9999;
}
button {
background-color: rgb(197, 218, 227);
border-radius: 37px;
color: #fff;
padding: 12px 5px;
display: block;
width: calc(100% + 4px);
margin-left: -2px;
margin-right: -2px;
border: unset;
cursor: pointer;
position: relative;
}
I have a checkbox that I have styled accordingly. Like this :
input[type=checkbox] {
transform: scale(1.3);
}
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 15px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
input[type=checkbox]:after {
content: " ";
background-color: rgba(224, 214, 214, 0.877);
display: inline-block;
margin-left: 10px;
padding-bottom: 5px;
color: #fff;
width: 22px;
height: 25px;
visibility: visible;
border: 1px solid transparent;
padding-left: 3px;
border-radius: 5px;
}
input[type=checkbox]:checked:after {
content: "\2714";
padding: -5px;
background: red;
font-weight: bold;
}
<input type="checkbox" [(ngModel)]="Option1" />
<p>Option1</p>
I tested this and it worked in Chrome and Opera, but I forgot to check Firefox.
Now I see that the checkboxes don't appear there at all.
I understand it is an issue of using :after for checkbox, but how do I fix this ?
So that the same checkbox appears styled on the browsers?.
I am uncertain of what to do so that I keep the design.
Thank you.
Read these specifications
:before and :after should only work on the element which can act as a
container of content. cannot contain any content so it should
not support those pseudo-elements. Chrome supports because it does not
follow the spec
However you can use <span> tag next to input tag to achieve this like below. It will work on firefox as well
body {
font: 13px Verdana;
}
label {
position: relative;
display: inline-block;
text-align: center;
}
label span {
display: block;
margin-top: 10px;
cursor: pointer;
}
input[type=checkbox] {
width: 30px;
height: 30px;
cursor: pointer;
margin: 0;
opacity: 0;
}
input[type=checkbox]+span:after {
content: "";
background-color: rgba(224, 214, 214, 0.877);
color: #fff;
width: 30px;
height: 30px;
border-radius: 5px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
line-height: 30px;
}
input[type=checkbox]:checked+span:after {
content: "\2714";
background: red;
}
<label>
<input type="checkbox" [(ngModel)]="Option1" />
<span>Option1</span>
</label>
Need to make a hamburger item with each line shorter than the last.
E.g.
------
-----
----
My idea is just to have a div with 3 spans inside it.
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<span class="menu_bar"></span>
<span class="menu_bar"></span>
<span class="menu_bar"></span>
</label>
And then in the CSS do e.g:
.menu_collapse_icon {
FOR EACH SPAN, REDUCE ITS LENGTH BY X AMOUNT?
}
But I don't know how to do this? I could just create 3 separate length bars, but would rather do it this way.
Add each element inside each other to create cascade:
.menu_bar {
padding-top: 10px;
width: 80%;
display: inline-block;
border-top: 1px solid #454545;
box-sizing: border-box;
}
.menu_collapse_icon_label {
width: 40px;
display: inline-block;
text-align: right;
font-size: 0;
border: 1px solid #ddd;
border-radius: 3px;
padding: 10px 10px 0 0;
}
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<div class="menu_bar">
<div class="menu_bar">
<div class="menu_bar"></div>
</div>
</div>
</label>
With the markup that you plan to have, this is not possible with a single selector. And am sure you will find many examples if you search.
However, am presenting this just for the sake of getting it done with a single selector. You will need nested elements for this.
label {
display: block; text-align: right;
border: 1px solid #bbb;
width: 32px; height: 32px;
padding: 4px 8px 4px 0px;
}
label span {
display: block; float: right; position: relative;
width: 75%; right: 0px; top: 8px;
border-bottom: 2px solid #999;
}
label > span { margin-top: -4px; }
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<span class="menu_bar">
<span class="menu_bar">
<span class="menu_bar"></span>
</span>
</span>
</label>
I suppose you could do something like below. You could probably make it responsive if you use percentages for i and the pseudo elements.
label {
display: block;
border: 1px solid #ccc;
width: 48px;
height: 48px;
position: relative;
}
i {
display: block;
background: #999;
height: 2px;
width: 50%;
position: absolute;
top: 50%;
margin-top: -1px;
right: 4px;
}
i::before, i::after {
right: 0;
position: absolute;
height: 2px;
background: #999;
content: "";
}
i::before {
width: 120%;
top: -8px;
}
i::after {
width: 80%;
bottom: -8px;
}
<label for="menu_collapse_icon" class="menu_collapse_icon_label">
<i class="menu-icon"></i>
</label>
However, I discourage it. You'd be better of creating an (SVG) icon that looks like this, and use it inline.
I managed to make it responsive, as a quick bit of fun. However, I do encourage you to look into icons. Here's the link to the responsive show case.
Important CSS:
i {
display: block;
background: #999;
height: 4%;
width: 50%;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 12%;
}
i::before, i::after {
right: 0;
position: absolute;
height: 100%;
background: #999;
content: "";
}
i::before {
width: 125%;
top: -400%;
}
i::after {
width: 75%;
bottom: -400%;
}
I am trying to style the up and down button of the input field number on FF. I have successfully achieved this on chrome with the below code but I can't find any CSS trick to do it on FF.
I can't use JS to do this.
Is it possible to style the up and down using CSS in FF? if so how? - I only need to achieve this on the latest version
DOM
<div class="productQty">
<span></span>
<input type="number" max="10" min="1" class="mod"/>
</div>
CSS
input[type="number"] {
height: 30px;
width: 60px;
font-size: 18px;
position: relative;
background-color: transparent;
border: none;
-moz-appearance: textfield;
}
.productQty span {
display: block;
width: 41px;
height: 30px;
background: white;
z-index: -1;
position: absolute;
top: 0;
left: 0;
bottom: 0;
border: solid 1px #999999;
}
/* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: transparent url("../img/updown.png") no-repeat center center;
width: 16px;
height: 100%;
opacity: 1; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].mod::-moz-inner-spin-button:hover,
input[type="number"].mod::-moz-inner-spin-button:active{
border: none;
}
/* Override browser form filling */
input:-webkit-autofill {
background: black;
color: red;
}
How does it look on chrome and how it should look
How does it looks in FF 38
You can't directly apply css to the buttons on FF, there is a bugreport about it:
https://bugzilla.mozilla.org/show_bug.cgi?id=1108469
If you don't mind to apply some css to the containing element, you could use the :before and :after to overlay custom buttons.
div:before, div:after {
display: block;
position: absolute;
width: 14px;
height: 8px;
line-height: 8px;
background-color: #ccc;
left: 136px;
z-index: 1;
font-size: 9px;
text-align: center;
pointer-events: none;
}
div:before {
content: "+";
top: 11px;
}
div:after {
content: "-";
top: 20px;
}
<div><input type="number" /></div>