I want to remove the white color totally.
Before selecting the suggestions
After choosing one of the suggestions
input[type="search"] {
-webkit-appearance: none !important;
background-clip: padding-box;
background-color: black;
vertical-align: middle;
border-radius: 2rem;
border: 2px solid #1de9b6;
font-size: 1rem;
width: 100%;
line-height: 2;
padding: 0.375rem 1.25rem;
-webkit-transition: border-color 0.2s;
-moz-transition: border-color 0.2s;
transition: border-color 0.2s;
color: white;
}
input[type="search"]:focus {
transition: all 0.5s;
box-shadow: 0 0 20px #00a2ff;
/* border-color: #f9d342; */
outline: none;
}
I've got some CSS code that works on Mozilla Firefox and doesn't on Google Chrome.
.lightBtn {
width: 500px;
height: 49px;
color: #000000;
background: white;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
display: inline-block;
-webkit-transition: all 0.25s;
transition: all 0.25s;
}
.lightBtn:hover {
background: black;
color: white;
}
.lightBtn span {
display: inline-block;
position: relative;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.lightBtn span:after {
content: '>>';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
-webkit-transition: 0.25s;
transition: 0.25s;
}
.lightBtn:hover span {
padding-right: 25px;
}
.lightBtn:hover span:after {
opacity: 1;
right: 0;
}
<button class="lightBtn" ><span>Special effect</span></button>
<p>Hover over the div element above, to see the transition effect.</p>
In Mozilla font color transition works well changing from black to white and in Chrome it just changes to white after specified time. How can I fix it?
I checked basic transition and it works well, but while adding animation on hover, the transition of color itself doesn't work. This is animation I'm trying achieve. Originally it's without font color transition.
Both color transition and animation work in separate, but when combined, the font color transition isn't working (in Google Chrome). You can check on Mozilla what I'm trying to achieve.
I'm not thrilled with this answer, but a pared down version of your code (without losing any of the pseudo-elements or effects like other answers here) shows inconsistent results on mouseIn and mouseOut after many repeated attempts. Every 3rd or 4th hover, the pseudo-element content >> will start to appear immediately, and then slowly solidify. The rest of the times I hover, it has the lag you're experiencing.
In summation, this looks like a WebKit rendering bug. I've filed one here: https://bugs.webkit.org/show_bug.cgi?id=163078 so I will check back once some progress has been made on that.
This pared down version does remove the delay in your Special effect text from showing, though. I normalized the transition timings for that.
.lightBtn {
width: 500px;
height: 49px;
color: #000000;
background: white;
display: inline-block;
}
.lightBtn:hover {
background: black;
color: white;
}
.lightBtn span {
display: inline-block;
position: relative;
transition: 0.25s;
}
.lightBtn span::after {
content: '>>';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.25s;
}
.lightBtn:hover span {
padding-right: 25px;
}
.lightBtn:hover span::after {
opacity: 1;
right: 0;
}
<button class="lightBtn"><span>Special effect</span></button>
<p>Hover over the div element above, to see the transition effect.</p>
If you have
transition: all 0.25s;
There is no need for
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
the 0.25s will be the duration, in your case, it might be your browser version, becasue it works for me, and i'm using chrome.
Try to add this and see if it helps, since you said the time works, but no animation, so I would think it's becasue you still need the webkit prefix.
-webkit-transition: all 0.25s;
Well, let's go over a few things:
First you go on to declare transition-duration: 0.2s; and -webkit-transition-duration: 0.2s;, then you declare a transition: all 0.25s;, which overrides the value declared on the two previous properties.
You have all as the value for transition, this is not desirable as it hits performance.
If you set transition: all .25s; for setting the initial transition, then override the properties with a transition-property: background-color, border, box-shadow, color;, the transition should work just fine.
Here is a JSFiddle with your functional code.
If nothing done here works for you, then it might be that your browser is outdated, as already pointed out by everybody else.
Looks like same ff and chrome.
.lightBtn {
color: #000000;
background: white;
height: 49px;
border: 2px solid white;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
border-radius: 0px 8px 8px 0px;
font-size: 16px;
font-family: Audiowide;
display: inline-block;
transition: all 0.25s;
cursor: pointer;
}
.lightBtn:hover {
background: black;
color: white;
border: 2px solid rgba(12, 1, 29, 0.87);
box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19);
}
<a class="lightBtn">
Hi guys!
</a>
<button class="lightBtn">
Wassup
</button>
What happens if you strip out all the other stuff so that the code is as basic as possible? Does this work? If so then you probably need to sort through some specificity issues or something along those lines... or maybe your chrome version is out of date (though that seems rather unlikely).
This works for me in chrome and FF btw.
<!DOCTYPE html>
<html>
<head>
<style>
.lightBtn {
width: 100px;
height: 100px;
color: #000000;
background: white;
height: 49px;
border: 2px solid white;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
border-radius: 0px 8px 8px 0px;
font-size: 16px;
font-family: Audiowide;
display: inline-block;
transition: all 0.25s;
cursor: pointer;
}
.lightBtn:hover {
background: black;
color: white;
border: 2px solid rgba(12, 1, 29, 0.87);
box-shadow: 0 8px 16px 0 rgba(50, 116, 165, 0.2), 0 6px 20px 0 rgba(51, 93, 206, 0.19);
}
</style>
</head>
<body>
<span class="lightBtn"></span>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>
I'm using the angular bootstrap timepicker but I cannot seem to change the font size which cuts off some of the text like below:
HTML:
<div class="col-md-1">
<div class="input-group">
<label>End:</label>
<timepicker ng-model="filter_endtime" ng-change="changed()" hour-step="hstep"
minute-step="mstep" show-meridian="ismeridian"></timepicker>
</div>
</div>
If I inspect the element in a browser I can change the .form-control font-size to 12px and it looks fine.
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.4285;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
Is there anyway I can override the font size in the timepicker control?
I've tried doing
font-size: 12px !important;
as another class in the input-group but it makes it look like this:
change .form-control class styles in your bootstrap css.
.form-control{
font-size:12px
}
or use inline style
<timepicker style="font-size:12px;" ng-model="filter_endtime" ng-change="changed()"
hour-step="hstep" minute-step="mstep" show-meridian="ismeridian">
</timepicker>
Just set css for .bootstrap-timepicker-hour and .bootstrap-timepicker-minute:
bootstrap-timepicker-hour{
font-size:12px !important;
}
Try in fiddle
http://jsfiddle.net/sqe64a09/
On my site I have links with a box shadow that appears when hovering. You can see it on http://www.lorteau.fr . That works just fine on Chrome, Opera and Firefox. IE however clips the top of it.
Chrome, Opera, Firefox:
IE:
HTML defining the links and all the containers around it:
<body>
<div class="main m-scene" id="page">
<div id="menu">
<a class="menu_link" id="wphone_link" href="wphone.html">Windows Phone</a>
<a class="menu_link" id="wmetro_link" href="wmetro.html">Windows Metro</a>
<a class="menu_link" id="wdesktop_link" href="wdesktop.html">Windows Desktop</a>
<a class="menu_link" id="linux_link" href="linux.html">Linux</a>
<a class="menu_link" id="other_link" href="other.html">Other</a>
</div>
</div>
</body>
CSS3 defining the hovering effect and the containers around it:
.html
{
background-color: #464646;
}
body
{
margin: 0;
}
#page
{
width: 900px;
min-width: 800px;
min-height: 100%;
-pie-box-shadow: 0px 0px 3px 1px #FFFFFF;
-moz-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
-webkit-box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 3px 1px rgba(255, 255, 255, 0.5);
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #000000;
background-color: #3C3C3C;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
padding: 7px 5px 6px 32px;
}
#menu
{
height: 57px;
display: block;
width: 85%;
margin-left: auto;
margin-right: auto;
margin-top: 5px;
text-align: center;
}
.menu_link, .menu_link:hover
{
font-family: 'Electrolize', Arial, sans-serif;
font-size: 18px;
text-align: left;
color: white;
display: inline;
text-decoration: none;
border-style: solid;
border-width: 1px;
border-color: #777777;
border-radius: 5px;
background-color: #777777;
padding: 5px;
margin-right: 5px;
-webkit-transition: 250ms linear 0s;
-moz-transition: 250ms linear 0s;
-o-transition: 250ms linear 0s;
transition: 250ms linear 0s;
}
.menu_link:hover
{
color: #FFBE5B;
box-shadow: 0px 0px 5px 5px rgba(255, 190, 91, 0.5);
}
.menu_link:active
{
color: #FFBE5B;
}
.m-scene .scene_element
{
animation-duration: 0.25s;
-webkit-animation-duration: 0.25s;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
transition-timing-function: ease-out;
}
I tried all the padding, margin and height combinations I could think of but that didn't change anything. Would some have an idea as to what I could modify so that the shadow isn't clipped on any browser?
Pff never mind. Removed "margin-top: 5px;" from #menu and added "padding-top: 15px;" and that did it.
Spelling out the question clearly always helps!
I can't seem to get my button to change colour with CSS3 transitions. I've been successful using the roundabout same code on and tags, but no such luck with the button.
Here's the code:
.button {
position:absolute;
width: 135px;
height: 46px;
background-color: #ef6529;
text-decoration: none;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #c33b00;
box-shadow: 0px 4px 0px #af5a5a;
-moz-box-shadow: 0px 4px 0px #af5a5a;
-webkit-box-shadow: 0px 4px 0px #af5a5a;
-webkit-transition:color 1s ease-in;
-moz-transition:color 1s ease-in;
-o-transition:color 1s ease-in;
transition:color 1s ease-in;
}
.button:hover {
width: 135px;
height: 46px;
background-color: #ff6726;
border-radius: 4px;
-moz-border-radius: 4px;
border: 1px solid #c33b00;
text-decoration: none;
}
and the HTML:
<a href="#" class="button">
<!--<h2>PUSH ME!</h2>-->
</a>
Cheers!
You haven't specified colors for the button. I presume you want to transition the background color insted. Just change transition:color 1s ease-in; to transition: background-color 1s ease-in;.