I am using this style to change the appearence of a checkbox:
th .checkbox label::before,th .checkbox label::before {
content: "";
display: inline-block;
position: absolute;
width: 17px;
height: 17px;
left: -20px;
border: 1px solid #cccccc;
border-radius: 3px;
background-color: #fff;
-webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
th .checkbox label::after {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -21px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
this works perfectly for before and after but the interdeterminate style in chrome do not have the correct position. So i tried it with:
th .checkbox label::indeterminate {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -20px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
but it does not work :(. how could I fix this and give the indeterminate at least a left: -21px; style.
thank you in advance!
indeterminate is a pseudo class so it starts with : while before and after are pseudo elements and start with ::
th .checkbox label:indeterminate {
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
left: -20px;
top: 0;
padding-left: 3px;
padding-top: 1px;
font-size: 11px;
color: #555555;
}
Please refer to https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate
and https://developer.mozilla.org/en-US/docs/Web/CSS/::before
Related
I am very new to css and i am trying to align the text center in the button, but i am not able to get it centered. Please look into my code and help me to fix it.
.new-btn{
clear:both;
white-space:nowrap;
display: inline-block;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn > i{
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>
text-align: center; is also not working. I have been trying to fix this for hours but still no luck. The result look like this
span is an inline element, so you need to set it to inline-block, then set its width and finaly text-align:center
p/s: research about flex. it will make your life easier
did some changes to your css instead of inline block i used flex and for the span it takes the width of 100% and reduced double the size of red circle width it also has display f;ex in it to justify the text to the center
.new-btn {
clear: both;
white-space: nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: flex-start;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-out;
}
.new-btn>span,
.new-icn>i {
float: left;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
line-height: 1em
}
.new-icn>i {
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn>span {
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
display: flex;
justify-content: center;
width: calc(100% - 120px);
}
.new-yt>i {
background: #ff0000;
}
.new-yt>span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>
Altered the code a bit, making the outside container a flex and centring the text as a span.
using the ::before treatment for the red circle element it is absolutely positioned and will ignore the 'Youtube' text
.new-btn{
clear:both;
position:relative;
white-space:nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn::before{
content:"";
display:inline-block;
position:absolute;
left:0;
top:0;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
background-color: #ff0000;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
.text{
display:flex;
}
<a class="new-btn new-icn new-yt" href="#"><span class="text">Youtube</span></a>
Could someone tell me why isn't my text "Add Product" appearing inside of the button when the user hovers on the button?
Adding
display: flex
for the body seems to fix the issue but I don't wanna set the display of my body to flex. Is there some other way I could make it work?
.button {
background: #f6bc00 no-repeat -12px center;
border: 1px solid #f6bc00;
border-radius: 4px;
color: #fff;
display: inline;
font-size: 9px;
font-weight: 700;
overflow: hidden;
padding: 5px 8px 3px 8px;
text-decoration: none;
line-height: 8px;
text-transform: uppercase;
transition: padding .2s ease, background-position .2s ease, transform .5s ease;;
}
.button:span {
margin: 0;
padding: 0;
}
.button:hover {
transform: scale(1, 1);
padding-left: 88px;
padding-right: 5px;
background-position: 5px center;
}
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
.button:hover span:nth-child(1) {
bottom: 3px;
left: 20px;
}
/* PRESENTATION */
body {
background-color: black;
}
.button:nth-child(1) {
margin-right: 1em;
}
<a class="button" href="#" download="">
<span>Add Product</span>
<span>Add</span></a>
one way to do it is to hide the add product text.
i changed this..
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
to this..
.button span:nth-child(1) {
display:none;
transition: left .2s ease;
}
then on hover display inline
.button:hover span:nth-child(1) {
display:inline;
bottom: 3px;
}
checkout the codepen.
https://codepen.io/cartoonzzy/pen/PoGYowZ
I have a modal created with the following CSS. But when I open it up, it appears and allows me to fill out the form fields but clicking on the buttons (they have onclick events) does absolutely nothing - I tried making the buttons simple links which open new pages, but they don't do tat either. I am doing this within a SquareSpace page. I hope that doesn't complicate things.
<style>
.info-modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: visible;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
.info-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 400px;
border-radius: 0.5rem;
}
.info-continue-button {
background-color: #0069d9;
border-color: #0062cc;
position: relative;
width: 100px;
font-family: "Oxygen", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
}
.info-continue-button:hover {
color: #fff;
}
.info-show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.info-field {
color: inherit;
font: inherit;
margin: 0;
line-height: normal;
margin-bottom: 15px;
background-color: #fff;
border-radius: 0;
-webkit-appearance: none;
box-shadow: none;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
width: 100%;
max-width: 400px;
height: 32px;
border: 0;
border-bottom: 2px solid #d1d1d1;
padding: 8px 0;
border-bottom-color: #2d56bb;
}
.info-modal button {
font: inherit;
margin: 0;
overflow: visible;
-webkit-appearance: button;
font-family: "Adamina", Georgia, serif;
display: inline-block;
height: 40px;
text-align: center;
font-size: 12px;
line-height: 38px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
margin-bottom: 10px;
color:#000;
outline: 0;
padding: 0 30px !important;
background-color: #e0e0e0;
border: 0;
font-weight: 700;
}
.info-modal button:hover {
color: #01855e;
}
.info-modal button[type='submit'].-disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.4;
}
.info-modal p {
margin-bottom:0px;
}
</style>
I am trying to reproduce the effect of the button on the right of this page.
Begin position :
End position after animation :
I have done this HTML code :
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
And CSS :
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: 0;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
For the moment, my code show the end position but i don't know how to do to perform the same translation effect on my div.
Could you help me ?
I think this is what you want. Still any queries feel free to ask.
body
{
overflow-x:hidden;
}
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -135px;
transition:all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
background-color: #35BDCF;
cursor: pointer;
}
#btnFeedbackHome p{
color: white;
font-weight: 600;
position: absolute;
top: 1px;
right: 8px;
font-size: 14px;
}
#btnFeedbackHome div{
width: 45px;
background-color: #2A97A6;
height: 45px;
}
#feedbackImgHomeBtn {
margin-top: 9px;
margin-left: 7px;
}
#btnFeedbackHome:hover
{
right: 0px;
}
<div id="btnFeedbackHome">
<div><img src="img/home_feedback.png" id="feedbackImgHomeBtn" /></div>
<p>Ideas & feedback</p>
</div>
You can achieve this with a simple CSS transition on the element. I've created a JSFiddle that builds on your example to show how to do this with no JavaScript as the only thing you need is a hover added to the main container. http://jsfiddle.net/cudome3h/1/
If you do everything that you did and just change the CSS to what I have here you will get a similar effect:
#btnFeedbackHome {
width: 180px;
height: 45px;
position: absolute;
top: 320px;
right: -140px;
background-color: #35BDCF;
cursor: pointer;
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#btnFeedbackHome:hover {
right: 0;
}
I have created a toggle switch using css.
I want #box1 to turn from a white background with black type to a black with white text and the toggle to turn to on.
I'm stuck trying to figure out the JavaScript. The button doesn't switch and the box doesn't turn back to white.
$('#myonoffswitch').change(function(){
console.log('here');
if ($(this).click())
{
$('#box1').addClass('dark-mode');
}
else
{
$('#box1').removeClass('dark-mode');
}
});
How can toggle the dark-mode class.
Fiddle
You can just use the toggleClass method. Demo
$('#myonoffswitch').change(function(){
$('#box1').toggleClass('dark-mode');
});
$(this).click() returns an instance of jQuery, which is a truthy value in JavaScript, this is why addClass was called in the first place
$('#myonoffswitch').change(function() {
$('#box1').toggleClass('dark-mode');
});
.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #FFFFFF;
color: #000000;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #FFFFFF;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #000000;
border: 2px solid #999999;
border-radius: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
-moz-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #FFFFFF;
}
#box1 {
color: black;
background-color: white;
border: 1px solid;
width: 100px;
height: 100px;
}
#box1.dark-mode {
color: #fff;
background-color: #000;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<br>
<div id="box1">This is text.</div>