So, I've taken over an internal project and the previous build had issues regarding the styling of check boxes. I have fixed the issue in Chrome which is fine for us as its the only installed browser here but when this goes live some modules will be available to customers which is where things get sticky. This is the code I am using to style the check boxes in Chrome:
input[type=checkbox] {
border-radius: 2px;
cursor: pointer;
margin-top: 1px;
border: 1px solid #gray;
background-color: white;
color: white;
white-space: nowrap;
overflow: hidden;
width: 20px;
height: 20px;
}
input[type=checkbox]:checked {
background-color: #3FAE2A;
border: 1px solid #3FAE2A;
}
input[type=checkbox] :hover {
border: 1px solid #3FAE2A;
-moz-transition: border-color 0.1s ease-out;
-o-transition: border-color 0.1s ease-out;
-webkit-transition: border-color 0.1s ease-out;
transition: border-color 0.1s ease-out;
}
Now currently this works in the sense that the check boxes are functional across all browsers but only styled in Chrome, is there any way for me to just use css to get this to work across IE and Firefox? If not, where should I be looking?
Related
Here is my website (currently building the mobile version). Here is the repository for the site.
button {
background-color: #fff;
border: 3px solid #efefef;
border-radius: 0.35em;
}
button:hover {
border-color: #49bf9d;
transition: border 0.2s ease-in-out;
}
I'm having issues with getting the border-color on my button elements to ease-out when hovering off the button element. The ease-in transition works just fine though.
Any Ideas?
Try this
add the transition property on button instead of hover
CSS
button
{
transition: border 0.2s ease-in-out !important;
}
hope this helps..
Add this to your CSS:
button {
transition: 0.4s ease-out all;
border: 4px solid black;
}
button:hover {
transition: 0.4s ease-in all;
border-color: red;
}
You can also add -moz-transition and -webkit-transition for older browsers.
I've got some buttons that have a CSS transition from black to yellow on hover, then return back to black. When clicked they make an AJAX call. They work nicely when I hover over them and click a mouse on all desktop browsers (naturally IE9 and lower ignore it), but on both iOS Safari, and the standard Android browser, the transition stays yellow after I have clicked the button. They do not return to the normal black state, like they do on a desktop system.
Any clues as to where I've gone wrong would be greatly appreciated. For those with a touch device, this Fiddle demonstrates the problem - http://jsfiddle.net/wpyz9whn/1/
CSS
a.button {
background-color: #000000;
color: #FFFFFF;
border: none;
text-decoration: none;
padding: 0px 10px;
display: block;
line-height: 24px;
font-weight: 700;
text-align: center;
transition: background 0.8s ease-out;
-moz-transition: background 0.8s ease-out;
-webkit-transition: background 0.8s ease-out;
text-transform: uppercase;
-webkit-appearance: none;
}
a.button:hover {
background: #ffcc00;
color: #000;
transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-webkit-transition: background 0.2s ease-in;
}
a.button:active {
background: #ff9c00;
transition: background 0s ease-in;
-moz-transition: background 0s ease-in;
-webkit-transition: background 0s ease-in;
}
a.button:focus {
outline: none;
}
HTML
<a class="button" onclick="return addToBasket(11628937,'/')">Add to Basket</a>
I'm new up here, and I tried ti find an answer to my question on existing forums. I tried some and couldn't resolve the issue.
I want to make the hover effect to stay after mouseout on this pre-structured code.
Someone have an idea ?
Thanks much !!!
#search_block_top {
position:absolute;
right: 0;
top: 120px;
z-index: 99;
}
#search_block_top p {padding:0;}
#search_block_top #search_query_top {
border: medium none;
height: 31px;
padding: 0;
width: 1px;
background:#FFF;
box-shadow:none;
line-height: 33px\9;
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
}
#search_block_top .button {
background: url("img/bg-search.png") no-repeat scroll right center transparent;
border: medium none;
border-radius: 0 0 0 0;
height: 33px;
line-height: 33px;
margin: 10px -5px 0 0;
padding: 0;
text-indent: -9999px;
width: 57px;
}
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox:hover #search_query_top{
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
width: 130px;
padding-left:10px;
margin: 10px 0 0;
background:#fff;
border: 1px solid #CCC;
}
#searchbox{}
#searchbox label{
text-indent: -9999px;
}
#searchbox #search_query_block{
border: 1px solid #CCCCCC;
-webkit-border-radius:3px !important;
-moz-border-radius:3px !important;
border-radius:3px !important;
height: 18px;
margin-top:10px;
}
#searchbox #search_button{padding: 1px 4px;}
#badAdviceGuy is right on this one. There's no way in pure css to make the change stay there after you've hovered off of it.
If you do want to venture into jQuery territory however, it would look something like this:
$(document).on('mouseenter', '#hover-element', function(){
$(this).addClass('highlight');
});
Then you would just add whatever changes you want to take place to the highlight class in css and voila!
hope that helps
Well it's best practice to put the jQuery code into a separate js file, but it seems like you'd rather just get it to work so here's the quick and dirty way:
using the css you added above, your new css will look like this:
Change this:
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox:hover #search_query_top{
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
width: 130px;
padding-left:10px;
margin: 10px 0 0;
background:#fff;
border: 1px solid #CCC;
}
To be this:
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox.highlight #search_query_top {
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
width: 130px;
padding-left:10px;
margin: 10px 0 0;
background:#fff;
border: 1px solid #CCC;
}
the html you copied in won't need to be changed, don't worry about that. Then you'll want to add this code into your header before the closing </head> tag
<script type="text/javascript">
$(document).ready(function(){
$(document).on('mouseenter', '#searchbox', function(){
$(this).addClass('highlight');
});
});
</script>
The only issue with this is that you may not have already included the jQuery library. If you put this code in and it doesn't work, add the following code into the header right before the js code you just put in:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Let me know if that helps, to answer your second question, no, css won't be able to override the styling on mouseleave.
Keep in mind also that if you're using something like wordpress, then the rules are different and none of this code will work.
good luck!
I can never get my CSS transitions to work on mouse out/off hover. It works fine on hover but not the other way around.
.btn {
border: 1px solid #5a5350;
background: #FFF;
color: inherit !important;
padding: 3px 10px;
display: inline-block;
font-weight: bold;
text-transform: uppercase;
-webkit-transition: background 0.5s ease-in-out;
-moz-transition: background 0.5s ease-in-out;
-o-transition: background 0.5s ease-in-out;
transition: background 0.5s ease-in-out;
}
.btn:hover {
color: #FFF !important;
background: #f79e43;
border: 1px solid #f79e43;
}
What's the problem with my code?
Thanks
Im having a problem inside of Chrome only, tested this inside of Opera, FF, Safari and it all works fine.
I know there was a bug with Chrome 17 with transitions on visited links so I even included that thought to be fix
There is still not animation for the transition on hover for border-bottom.
any clues? am I just not seeing something? I've read around and it all seems to be talking about the color of the text, while i'm trying to transition in the border-color.
I tried to animate in border-bottom from none to 1px solid #9ecd41 but found that in all browsers except firefox had a funky jagged animation where it kinda bounced.
any help would be awesome, attached is the code i'm working with.
Ok here is my html
<nav>
<ul class="nav">
<li>ABOUT</li>
<li>SERVICES</li>
<li>MEDIA</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</nav>
And here is my CSS
nav {
float: right;
height: auto;
width: auto;
padding: 25px;
}
ul.nav {
width: auto;
height: auto;
overflow: visible;
}
.nav > li {
display: inline-block;
margin-right: 20px;
}
.nav > li:last-child {
margin-right: 5px;
}
/* non-visited links: Chrome transition bug fix */
.nav > li > a:visited {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
/* visited links: Chrome transition bug fix */
.nav > li > a {
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
display: block;
font-family: "proxima-nova-condensed",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
font-smooth: always;
-webkit-font-smoothing: antialiased;
padding-bottom: 5px;
border-bottom: 1px solid #333; /* CSS3 transition */
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
}
.nav > li > a:hover {
border-bottom: 1px solid #9ecd41;
}
.nav > li > a:active {
border-bottom: 1px solid #f96d10;
}
Just styled the <li> the way I would of styled the li with widths/heights/padding/border etc and then just styled the link to fill the li and just styled the links colour and font properties. Chrome has small bug on border-bottom for link transitions
This aught to be an easy fix.
As far as I can see your problem lies by where you put the transition in.
With chrome it needs to be added to the at most parent.
Try adding it here:
.nav > li {
display: inline-block;
margin-right: 20px;
}
Also add the declaration for the -webkit- elements
for ex.
.nav > li {
display: inline-block;
margin-right: 20px;
-webkit-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
transition: all .2s ease-in;
-webkit-transition-property: all;
-webkit-transition-duration: .5s;
-webkit-transition-timing-function: ease-in;
}
See if this works and if not I'll try to build something similar and work on a solution.
I had this problem with Bootstrap 4 navbar component. My menu links had border-bottom and starting from the second one, all were invisible during menu opening on mobile.
Fixed it with transform: rotate(0); on the element with the border-bottom.