Good afternoon.
I'm having a problem changing the background color of the checkboxes that are selected.
CheckBox to change
I've seen options on the internet and some questions right here in the stack. But none of them were successful. Below is the DOM image where the elements are inserted.
Dom about element
The last code I tested was this and it still didn't work
input[type=checkbox]:checked:after{
background-color: red !important;
color: blue !important;
}
Aimed to have a background in this color # FFEA00 when checked and the arrow to be # 000 when checked.
Best regards and thanks for the help
Yellow background when checked, black arrow when checked. It's here:
.checkbox-label {
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 22px;
line-height: 24px;
height: 24px;
width: 24px;
clear: both;
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .checkbox-custom {
position: absolute;
top: 0px;
left: 0px;
height: 24px;
width: 24px;
background-color: transparent;
border-radius: 5px;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
border: 2px solid #000;
}
.checkbox-label input:checked ~ .checkbox-custom {
background-color: #FFEA00;
border-radius: 5px;
-webkit-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid #000;
}
.checkbox-label .checkbox-custom::after {
position: absolute;
content: "";
left: 12px;
top: 12px;
height: 0px;
width: 0px;
border-radius: 5px;
border: solid #000;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(0deg) scale(0);
-ms-transform: rotate(0deg) scale(0);
transform: rotate(0deg) scale(0);
opacity:1;
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
.checkbox-label input:checked ~ .checkbox-custom::after {
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
opacity:1;
left: 8px;
top: 3px;
width: 6px;
height: 12px;
border: solid #000000;
border-width: 0 2px 2px 0;
background-color: transparent;
border-radius: 0;
}
<div class="checkbox-container">
<label class="checkbox-label">
<input type="checkbox">
<span class="checkbox-custom"></span>
</label>
</div>
cannot get the smooth fade of the font awesome icon on the mouse hover.
What am I doing wrong? Ideally I want to get the icon fade in and also add some opacity to the background image.
fiddle:
http://jsfiddle.net/W5e9Q/45/
CODE:
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
#import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
.adminDemoVideo {
position: relative;
display: inline-block;
transition: all .5s linear;
}
.adminDemoVideo::before {
content: '\f04b';
z-index: 5;
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
padding: 3px 15px 3px 25px;
color: white;
font-family: 'FontAwesome';
font-size: 50px !important;
background-color: rgba(23, 35, 34, 0.75);
border-radius: 5px 5px 5px 5px;
display:none;
transition: all .5s linear;
}
.adminDemocontainer:hover a::before {
display:block;
transition: all .5s linear;
}
<div class="adminDemocontainer">
<a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
<img src="http://placehold.it/1200x800/fc0" class="img-responsive">
</a>
</div>
i have add same css please check your help full
#import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );
#import url( 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
.adminDemoVideo {
position: relative;
display: inline-block;
transition:all 0.3s ease;
}
.adminDemoVideo:after {
content: '\f04b';
z-index: 5;
position: absolute;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
padding: 3px 15px 3px 25px;
color: white;
font-family: 'FontAwesome';
font-size: 50px !important;
background-color: rgba(23, 35, 34, 0.75);
border-radius: 5px 5px 5px 5px;
-webkit-transition: all 1s;
transition: all 1s;
opacity:0;
}
.adminDemoVideo:hover:after {
opacity:1;
}
<div class="adminDemocontainer">
<a href="https://player.vimeo.com/video/153113362?autoplay=1&color=54b3e4" class="adminDemoVideo">
<img src="http://placehold.it/1200x800/fc0" class="img-responsive">
</a>
</div>
I've been trying to remove this ugly flicker when hovering over the images. I've tried adding -webkit-backface-visibility: hidden; to the hover element along with the :hover itself but can't seem to shake it. Seems the promblem is only on Chrome and Safari.
website: http://best-law-firm-sites.com/lawpromo12/
.col-sm-4 {
width: 33.3333%;
float: left;
}
.panel-wrap {
height: 100% !important;
}
.panel-wrap .col-sm-4 {
padding: 0;
}
.hovereffect {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.hovereffect h2,
.hovereffect img {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
-webkit-transform: scale(1.001);
-ms-transform: scale(1.001);
-moz-transform: scale(1.001);
-o-transform: scale(1.001);
transform: scale(1.001);
}
.hovereffect:hover img {
-webkit-transform: scale(1.17);
-ms-transform: scale(1.17);
-moz-transform: scale(1.17);
-o-transform: scale(1.17);
transform: scale(1.17);
}
.hovereffect h2 {
bottom: 10%;
color: #fff;
font-size: 30px;
font-weight: 700;
padding: 10px 10px 10px 17px;
position: absolute;
text-align: left;
text-shadow: 2px 3px 6px rgba(0, 0, 0, 1);
text-transform: uppercase;
}
.hovereffect h2::after {
display: block;
content: "";
height: 4px;
width: 75px;
background: #BCA474;
margin: 20px 0 0;
box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.6);
}
.hovereffect a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
text-transform: uppercase;
color: #fff;
margin: 50px 0 0 0;
background-color: transparent;
-webkit-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 100%;
width: 85%;
position: absolute;
top: 0;
left: 0;
padding: 70px;
}
.hovereffect:hover a.info {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
<div class="col-sm-4 panel-1">
<div class="hovereffect">
<img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel1.jpg" alt="">
<div class="overlay">
<h2>Family Law</h2>
<a class="info" href="services/family-law/"></a>
</div>
</div>
</div>
<div class="col-sm-4 panel-2">
<div class="hovereffect">
<img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel.jpg" alt="">
<div class="overlay">
<h2>Estate Planning</h2>
<a class="info" href="services/estate-planning/"></a>
</div>
</div>
</div>
<div class="col-sm-4 panel-2">
<div class="hovereffect">
<img class="img-responsive" src="http://best-law-firm-sites.com/lawpromo12/wp-content/uploads/2016/02/panel.jpg" alt="">
<div class="overlay">
<h2>Wills & Trusts</h2>
<a class="info" href="services/wills-trusts/"></a>
</div>
</div>
</div>
I have encountered similarly strange behavior in the past when using the backface visibility hack to trick the browser into using the 3d pipeline. There are other ways to 'trick' the browser into using the 3d pipeline like:
.class{
transform: translate3d(0,0,1);
}
You can resolve this problem by increasing the transform scale property to 1.001:
.hovereffect img{transform: scale(1.001);}
I am using ASP.NET web form in Visual studio 2013.
I am using the following CSS code snippet for button,
.button::before {
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 50%;
left: 50%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
and
.button:active::before, .button:focus::before {
-webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
Its working fine for html button, but not properly working for ASP.NET button.
<div class="button-container">
<asp:Button ID="submit" class="button" runat="server" Text="Submit" OnClick="submit_Click" />
<button type="submit" class="button"><span>Submit</span></button>
</div>
Here is my ASP.NET web form
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="OrderTakingUI.aspx.cs" Inherits="ResponsiveWebApplication.OrderTakingUI" %>
<!DOCTYPE html>
<html>
<head>
<title>Orders</title>
<meta charset='UTF-8'>
<style>
#import url(http://fonts.googleapis.com/css?family=Roboto);
body,
input,
select,
textarea,
body * {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
}
body::after, body::before,
input::after,
input::before,
select::after,
select::before,
textarea::after,
textarea::before,
body *::after,
body *::before {
box-sizing: border-box;
}
body {
background-image: -webkit-linear-gradient(top, #f2f2f2, #e6e6e6);
background-image: linear-gradient(top, #f2f2f2, #e6e6e6);
}
h1 {
font-size: 2rem;
text-align: center;
margin: 0 0 2em;
}
.container {
max-width: 40rem;
margin: 2rem auto;
background: #fff;
width: 100%;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
padding: 3rem 5rem 0;
border-radius: 1px;
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transition: box-shadow 0.28s ease, -webkit-transform 0.28s ease;
transition: box-shadow 0.28s ease, -webkit-transform 0.28s ease;
transition: box-shadow 0.28s ease, transform 0.28s ease;
transition: box-shadow 0.28s ease, transform 0.28s ease, -webkit-transform 0.28s ease;
}
fieldset {
margin: 0 0 3rem;
padding: 0;
border: none;
}
/*------------------------------input type text and textarea and other starts-----*/
.form-inline > .form-group,
.form-inline > .btn {
display: inline-block;
margin-bottom: 0;
}
.form-help {
margin-top: 0.125rem;
margin-left: 0.125rem;
color: #b3b3b3;
font-size: 0.8rem;
}
.form-group input {
height: 1.9rem;
}
.form-group textarea {
resize: none;
}
.form-group select {
width: 100%;
font-size: 1rem;
height: 1.6rem;
padding: 0.125rem 0.125rem 0.0625rem;
background: none;
border: none;
line-height: 1.6;
box-shadow: none;
}
.form-group .input-label {
position: absolute;
top: 0.25rem;
pointer-events: none;
padding-left: 0.125rem;
z-index: 1;
color: #b3b3b3;
font-size: 1rem;
font-weight: normal;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
}
.form-group .bar {
position: relative;
border-bottom: 0.0625rem solid #999;
display: block;
}
.form-group .bar::before {
content: '';
height: 0.125rem;
width: 0;
left: 50%;
bottom: -0.0625rem;
position: absolute;
background: #B73394;
-webkit-transition: left 0.28s ease, width 0.28s ease;
transition: left 0.28s ease, width 0.28s ease;
z-index: 2;
}
.form-group input,
.form-group textarea {
display: block;
background: none;
padding: 0.125rem 0.125rem 0.0625rem;
font-size: 1rem;
border-width: 0;
border-color: transparent;
line-height: 1.9;
width: 100%;
color: transparent;
-webkit-transition: all 0.28s ease;
transition: all 0.28s ease;
box-shadow: none;
}
.form-group input[type="file"] {
line-height: 1;
}
.form-group input[type="file"] ~ .bar {
display: none;
}
.form-group select,
.form-group input:focus,
.form-group input:valid,
.form-group input.form-file,
.form-group input.has-value,
.form-group textarea:focus,
.form-group textarea:valid,
.form-group textarea.form-file,
.form-group textarea.has-value {
color: #333;
}
.form-group select ~ .input-label,
.form-group input:focus ~ .input-label,
.form-group input:valid ~ .input-label,
.form-group input.form-file ~ .input-label,
.form-group input.has-value ~ .input-label,
.form-group textarea:focus ~ .input-label,
.form-group textarea:valid ~ .input-label,
.form-group textarea.form-file ~ .input-label,
.form-group textarea.has-value ~ .input-label {
font-size: 0.8rem;
color: gray;
top: -1rem;
left: 0;
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
outline: none;
}
.form-group select:focus ~ .input-label,
.form-group input:focus ~ .input-label,
.form-group textarea:focus ~ .input-label {
color: #B73394;
}
.form-group select:focus ~ .bar::before,
.form-group input:focus ~ .bar::before,
.form-group textarea:focus ~ .bar::before {
width: 100%;
left: 0;
}
.form-group {
position: relative;
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
/*------------------------------input type text and textarea and other ends-----*/
/*--------------------------------Button starts--------------------------------*/
.button-container {
text-align: center;
}
.button {
position: relative;
background: currentColor;
border: 1px solid currentColor;
font-size: 1.1rem;
color: #B73394;
margin: 3rem 0;
padding: 0.75rem 3rem;
cursor: pointer;
-webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
overflow: hidden;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.button span {
color: #fff;
position: relative;
z-index: 1;
}
.button::before {
content: '';
position: absolute;
background: #071017;
border: 50vh solid #1d4567;
width: 30vh;
height: 30vh;
border-radius: 50%;
display: block;
top: 50%;
left: 50%;
z-index: 0;
opacity: 1;
-webkit-transform: translate(-50%, -50%) scale(0);
transform: translate(-50%, -50%) scale(0);
}
.button:hover {
color: #B73394;
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.button:active::before, .button:focus::before {
-webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 0;
}
.button:focus {
outline: none;
}
/*--------------------------------Button ends--------------------------------
</style>
</head>
<body>
<div class="container">
<form id="form1" runat="server" method="post">
<div class="form-group">
<asp:DropDownList ID="DropDownList1" runat="server" required=""></asp:DropDownList>
<label for="select" class="input-label">Selectbox</label><i class="bar"></i>
</div>
<div class="form-group">
<asp:TextBox ID="text" runat="server" required="required"></asp:TextBox>
<label for="input" class="input-label">Textfield</label><i class="bar"></i>
</div>
<div class="form-group">
<asp:TextBox id="textarea" TextMode="multiline" Columns="50" Rows="5" runat="server" required="required" />
<label for="textarea" class="input-label">Textarea</label><i class="bar"></i>
</div>
<div class="button-container">
<asp:Button ID="submit" class="button" runat="server" Text="Submit" OnClick="submit_Click" />
<button type="submit" class="button"><span>Submit</span></button>
</div>
</form>
</div>
</body>
</html>
I do not have much experience of using CSS with ASP.NET. I am expecting your help.
If you want to use css class in asp.net control use CssClass instead of class like below.
<asp:Button ID="submit" CssClass="button" runat="server" Text="Submit" OnClick="submit_Click" />
Find out control's id after rendering in client side. Then implement CSS on that id. If you use id instead of css class.
For asp.button you should use CssClass instead class:
<asp:Button ID="submit" CssClass="button" runat="server" Text="Submit" OnClick="submit_Click" />
I have a tooltip box and it is working fine. Now I want to add some fade in fade out once the tool-tip box pops in and out.
<a class="tooltip" title="This is some information for our tooltip." href="#"><img id="graph_one" alt="" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" class="graph one"> </a>
Demo : http://jsfiddle.net/squidraj/FHUbA/
How about this?
http://jsfiddle.net/FHUbA/14/
.tooltip:after{
opacity: 0;
-webkit-transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
background: #333;
background: rgba(0, 0, 0, .8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:after {
opacity:1;
}
What about this one:
http://jsfiddle.net/Roobyx/FHUbA/45/
(you can fix the styles afterwards)
HTML:
<a class="has-tooltip" href="#">
<span class="tooltip">This is some information for our tooltip.</span>
<img id="graph_one" class="graph one" src="https://www.onlandscape.co.uk/wp-content/uploads/2013/09/Doug-Chinnery-ICM-Images-4-45x45.jpg" />
</a>
CSS:
a[title].tooltip {
width:45px;
height:90px;
}
.tooltip {
display: inline-block;
position: relative;
}
.has-tooltip {
color: #555;
font-size: 16px;
display: block;
margin: 150px 75px 10px 75px;
padding: 5px 5px;
position: relative;
text-align: center;
width: 200px;
-webkit-transform: translateZ(0); /* webkit flicker fix */
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */
}
.has-tooltip .tooltip {
background: #000;
bottom: 100%;
color: #fff;
display: block;
left: -10px;
margin-bottom: 15px;
border-radius: 5px;
opacity: 0;
padding: 20px;
position: absolute;
visibility: hidden;
width: 100%;
-webkit-transform: translateY(10px);
-moz-transform: translateY(10px);
-ms-transform: translateY(10px);
-o-transform: translateY(10px);
transform: translateY(10px);
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
transition: all .25s ease-out;
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
}
.has-tooltip .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
.has-tooltip .tooltip:after {
border-left: solid transparent 10px;
border-right: solid transparent 10px;
border-top: solid #000 10px;
bottom: -10px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.has-tooltip:hover .tooltip {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}