Develop Reference

How come that the scrollbar changes when im on Chrome and not on Firefox

So I am playing around with scrollbars and im trying to recreate these (link below), and I just realized that they do only change colors if I am on Chrome but not if I am on Firefox, what causes this and how do I properly deal with this?
I tried looking at other examples aswell but it seems that no matter what example I look at, all of them have no effect on Firefox
https://codepen.io/akinjide/pen/BpggrZ
HTML
- var n = 1
h1 Customize the Browser's Scrollbar with CSS
#wrapper
.scrollbar#style-default
.force-overflow
while n < 12
.scrollbar(id="style-" + n++)
.force-overflow
CSS
.scrollbar {
margin-left: 22px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow {
min-height: 450px;
}
#wrapper {
text-align: center;
margin: auto;
}
#style-1::-webkit-scrollbar,
#style-2::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar,
#style-5::-webkit-scrollbar,
#style-6::-webkit-scrollbar,
#style-7::-webkit-scrollbar,
#style-8::-webkit-scrollbar,
#style-9::-webkit-scrollbar,
#style-10::-webkit-scrollbar,
#style-11::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
/** STYLE 1 */
#style-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/** STYLE 2 */
#style-2::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #D62929;
}
#style-2::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/** STYLE 3 */
#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
/** STYLE 4 */
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #000000;
border: 2px solid #555555;
}
/** STYLE 5 */
#style-5::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar-thumb {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%,
color-stop(.5, rgba(255, 255, 255, .2)),
color-stop(.5, transparent), to(transparent));
}
/** STYLE 6 */
#style-6::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar-thumb {
background-color: #F90;
background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/** STYLE 7 */
#style-7::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-7::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(122,153,217)),
color-stop(0.72, rgb(73,125,189)),
color-stop(0.86, rgb(28,58,148)));
}
/** STYLE 8 */
#style-8::-webkit-scrollbar-track {
border: 1px solid black;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar-thumb {
background-color: #000000;
}
/** STYLE 9 */
#style-9::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar-thumb {
background-color: #F90;
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent)
}
/** STYLE 10 */
#style-10::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(left, #96A6BF, #63738C);
box-shadow: inset 0 0 1px 1px #5C6670;
}
#style-10::-webkit-scrollbar-track {
border-radius: 10px;
background: #eee;
box-shadow: 0 0 1px 1px #bbb, inset 0 0 7px rgba(0,0,0,0.3)
}
#style-10::-webkit-scrollbar-thumb:hover {
background: linear-gradient(left, #8391A6, #536175);
}
/** STYLE 11 */
#style-11::-webkit-scrollbar-track {
border-radius: 10px;
background: rgba(0,0,0,0.1);
border: 1px solid #ccc;
}
#style-11::-webkit-scrollbar-thumb {
border-radius: 10px;
background: linear-gradient(left, #fff, #e4e4e4);
border: 1px solid #aaa;
}
#style-11::-webkit-scrollbar-thumb:hover {
background: #fff;
}
#style-11::-webkit-scrollbar-thumb:active {
background: linear-gradient(left, #22ADD4, #1E98BA);
}

I believe Firefox doesn't support custom scrollbar color. There's been a request open for over 17 years to change this.
https://bugzilla.mozilla.org/show_bug.cgi?id=77790
You'll have to use a library such as http://jscrollpane.kelvinluck.com/ (which I've read is a PITA) or http://utatti.github.io/perfect-scrollbar/
Good luck!

show progress percentage on progress bar

I have some HTML file with css and javascript, it shows progress bar depending on project start date, end date and current date, it works fine but I need that progress percentage to show into the bar.
there is my file content:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style type="text/css">
.meter {
height: 20px;
/* Can be anything */
position: relative;
margin: 60px 0 20px 0;
/* Just for demo spacing */
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
box-shadow : inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43, 194, 83);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(43, 194, 83)), color-stop(1, rgb(84, 240, 84)));
background-image: -moz-linear-gradient(center bottom, rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}
.meter > span:after, .animate > span > span {
content:"";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}
.animate > span:after {
display: none;
}
#-webkit-keyframes move {
0% {
background-position: 0 0;
}
100% {
background-position: 50px 50px;
}
}
.orange > span {
background-color: #f1a165;
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}
.red > span {
background-color: #f0a3a3;
background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f0a3a3), color-stop(1, #f42323));
background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}
.nostripes > span > span, .nostripes > span:after {
-webkit-animation: none;
background-image: none;
}
</style>
<title>Date to Percentage Progress</title>
<script type='text/javascript'>//<![CDATA[
var targetDate = new Date("07/12/2017");
var beginDate = new Date("04/20/2017");
var totalTime = (targetDate - beginDate);
$(function () {
//Create a custom event on the span to handle incoming data for animation.
$(".meter > span").bind("progress-event", function (e, data) {
$(this)
.width($(this).prop("width"))
.data("origWidth", data.Complete)
.animate({
width: $(this).data("origWidth") + "%"
}, 1200);
$(this).prop("title",($(this).data("origWidth") + "%"));
});
//Initial animation on page load.
$(".meter > span").each(function () {
$(document).trigger("date-changed", {
Date: new Date()
});
});
//Apply the datepicker with an event handler for a selected date
$("#date-input").datepicker({
onSelect: function (selectedDate, obj) {
$(document).trigger("date-changed", {
Date: selectedDate
});
} // end onSelect function
});
});
//Custom event to handle a date being picked from the datepicker
$(document).bind("date-changed", function (e, data) {
var dateProgress = new Date(data.Date) - beginDate;
var completionPercentage = (Math.round((dateProgress / totalTime) * 100));
if(completionPercentage > 100) { //Make sure we don't go past 100
completionPercentage = 100;
} // end if
$(".meter > span").trigger("progress-event", {
Date: data.Date,
Complete: completionPercentage
});
});
//]]>
</script>
</head>
<body>
<div class="meter"> <span></span>
</body>
</html>

Since you already using jquery. I would suggest to use jQueryUI progressbar UI widget and refer this example from the official jQueryUI website.
https://jqueryui.com/progressbar/#download
I hope this helps.

How to make buttons sunken after being clicked?

I have a multiple set of buttons which are clicked to show that they are selected.I have already successfully achieved that.But the problem is the buttons rise again after mouse up.
I need the buttons to stay pressed after the mouse leaves them.
Screenshot :
Code :
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button:active {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button:active span {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<a class="button">
<span>select me </span>
</a>

You can find the full code below for a version based on jQuery, one based on vanilla JS and one using only HTML & CSS to achieve the desired effect.
You can also play around with the code at the following Fiddles:
jQuery version
JS version without jQuery
HTML/CSS only version
jQuery version :
HTML :
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<a class="button">
<span>select me </span>
</a>
CSS :
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button.pressed {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button.pressed span {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
JS :
$('.button').click(function(){
$(this).toggleClass('pressed');
});
JS version without jQuery :
HTML :
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<a class="button">
<span>select me </span>
</a>
CSS :
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button.pressed {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button.pressed span {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
JS :
var buttons = document.getElementsByClassName("button");
[].forEach.call(buttons, function(button) {
button.addEventListener("click", function(e) {
this.classList.toggle('pressed');
});
});
HTML/CSS only version :
HTML :
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css">
<button class="button">
<input type="checkbox" id="selectme" />
<span>
<label for="selectme">select me </label>
</span>
</button>
CSS :
.button {
margin-left: -5000px;
}
.button span {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1),
/* gradient effects */
0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 14px 6px -1px rgba(128, 128, 128, 1);
/* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button label {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(linear, left bottom, left top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.2))),
/* dark outside gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(210, 210, 210, 0.3)), color-stop(20%, rgba(210, 210, 210, 0)), color-stop(80%, rgba(210, 210, 210, 0)), color-stop(100%, rgba(210, 210, 210, 0.3))),
/* light inner gradient */
-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(20%, rgba(255, 255, 255, 0.5)), color-stop(80%, rgba(255, 255, 255, 0.5)), color-stop(100%, rgba(255, 255, 255, 0))),
/* diagonal line pattern */
-webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(40%, rgba(255, 255, 255, 0)), color-stop(40%, #D2D2D1), color-stop(60%, #D2D2D1), color-stop(60%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 0)));
-webkit-box-shadow: 0px -1px #fff,
/* top highlight */
0px 1px 1px #FFFFFF;
/* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20', 'PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button label:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button input:checked + span {
-webkit-box-shadow: 0px 3px rgba(128, 128, 128, 1), 0px 4px rgba(118, 118, 118, 1), 0px 5px rgba(108, 108, 108, 1), 0px 6px rgba(98, 98, 98, 1), 0px 7px rgba(88, 88, 88, 1), 0px 8px rgba(78, 78, 78, 1), 0px 10px 2px 0px rgba(128, 128, 128, .6);
/* shadow */
}
.button input:checked + span label {
-webkit-transform: translate(0, 5px);
/* depth of button press */
}
.button label:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
JS :
/* CSS only means that no JS code is required at all! */

You can achieve it without JavaScript. Try :checked pseudo class and adjacent sibling selector (+):
label {
width: 120px;
height: 40px;
background: #d00;
display: inline-block;
text-align: center;
line-height: 40px;
cursor: pointer;
color: white;
}
#checkbox {
display: none;
}
#checkbox:checked + label {
background: #600;
}
<input type="checkbox" id="checkbox">
<label for="checkbox">select me </label>
I also did a little change to your fiddle
You can also make nice look single selection:
label {
width: 120px;
height: 40px;
background: #d00;
display: inline-block;
text-align: center;
line-height: 40px;
cursor: pointer;
color: white;
}
input {
display: none;
}
input:checked + label {
background: #600;
}
<input type="radio" name="group" id="option1">
<label for="option1">select 1</label>
<input type="radio" name="group" id="option2">
<label for="option2">select 2</label>
<input type="radio" name="group" id="option3">
<label for="option3">select 3</label>
<input type="radio" name="group" id="option4">
<label for="option4">select 4</label>

First, decorate your css styles that use :active attribute with an alias class like
.button:active, .button-active{
...
}
.button:active span, .button-active span{
...
}
then make a onclick event handler which manually toggles the class
function toggleActive(element){
element.classList.toggle('button-active');
}
function toggleActive(element){
element.classList.toggle('button-active');
}
body {
background: #A7A9AC;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(.34, rgba(230,237,241,.05)),
color-stop(.67, rgba(230,237,241,0)));
-webkit-background-size: 5px 5px;
}
#pagegradient {
background-image:
-webkit-gradient(
radial,
50% -50,
300,
50% 0,
0,
from(rgba(230, 237, 241, 0)),
to(rgba(230, 237, 241, 0.8)));
height:100%;
left:0px;
position:absolute;
top:0;
width: 600px;
}
.button {
position: absolute;
top: 100px;
left: 200px;
display: inline-block;
margin: 0 auto;
-webkit-border-radius: 10px;
-webkit-box-shadow:
0px 3px rgba(128,128,128,1), /* gradient effects */
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
-webkit-transition: -webkit-box-shadow .1s ease-in-out;
}
.button span {
background-color: #E8E8E8;
background-image:
/* gloss gradient */
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.3)),
color-stop(100%,rgba(255,255,255,0.2))),
/* dark outside gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(210,210,210,0.3)),
color-stop(20%,rgba(210,210,210,0)),
color-stop(80%,rgba(210,210,210,0)),
color-stop(100%,rgba(210,210,210,0.3))),
/* light inner gradient */
-webkit-gradient(
linear,
left top,
right top,
color-stop(0%,rgba(255,255,255,0)),
color-stop(20%,rgba(255,255,255,0.5)),
color-stop(80%,rgba(255,255,255,0.5)),
color-stop(100%,rgba(255,255,255,0))),
/* diagonal line pattern */
-webkit-gradient(
linear,
0% 100%,
100% 0%,
color-stop(0%,rgba(255,255,255,0)),
color-stop(40%,rgba(255,255,255,0)),
color-stop(40%,#D2D2D1),
color-stop(60%,#D2D2D1),
color-stop(60%,rgba(255,255,255,0)),
color-stop(100%,rgba(255,255,255,0)));
-webkit-box-shadow:
0px -1px #fff, /* top highlight */
0px 1px 1px #FFFFFF; /* bottom edge */
-webkit-background-size: 100%, 100%, 100%, 4px 4px;
-webkit-border-radius: 10px;
-webkit-transition: -webkit-transform .1s ease-in-out;
display: inline-block;
padding: 10px 40px 10px 40px;
color: #3A474D;
text-transform: uppercase;
font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
font-weight: 700;
font-size: 32px;
text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
.button span:hover {
color: #AEBF3B;
text-shadow: 0px -1px #97A63A;
cursor: pointer;
}
.button:active, .button-active{
-webkit-box-shadow:
0px 3px rgba(128,128,128,1),
0px 4px rgba(118,118,118,1),
0px 5px rgba(108,108,108,1),
0px 6px rgba(98,98,98,1),
0px 7px rgba(88,88,88,1),
0px 8px rgba(78,78,78,1),
0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
}
.button:active span, .button-active span{
-webkit-transform: translate(0, 5px); /* depth of button press */
}
.button span:after {
content: ">";
display: block;
width: 10px;
height: 10px;
position: absolute;
right: 14px;
top: 12px;
font-family: 'Cabin';
font-weight: 700;
color: #AEBF3B;
text-shadow: 0px 1px #fff, 0px -1px #97A63A;
font-size: 26px;
}
<link href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" >
<link href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" >
<div id="pagegradient"></div>
<a class="button" onclick="toggleActive(this)">
<span>select me </span>
</a>

How to slide a DIV on link click

I have the following HTML:
<div id="trt" style="position: relative; height: 40px;">
<a href="#" style="text-align: center" class="a_demo_three third_button">
M E N U
</a>
</div>
<div id="tst" style="position: relative; height: 200px; width: 200px; background-color: #FF0000; display: none;">
THIS IS THE INNER MENU
</div>
CSS:
.a_demo_three {
background-color:#3bb3e0;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
border-left:solid 1px #2ab7ec;
margin-left:35px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}
.a_demo_three:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}
.a_demo_three::before {
background-color:#2561b4;
content:"1";
width:35px;
max-height:29px;
height:100%;
position:absolute;
display:block;
padding-top:8px;
top:0px;
left:-36px;
font-size:16px;
font-weight:bold;
color:#8fd1ea;
text-shadow:1px 1px 0px #07526e;
border-right:solid 1px #07526e;
background-image: linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -o-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -moz-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -ms-linear-gradient(bottom, rgb(10,94,125) 0%, rgb(14,139,184) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(10,94,125)),
color-stop(1, rgb(14,139,184))
);
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 0px 10px 5px #999 ;
}
.a_demo_three:active::before {
top:-3px;
-webkit-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
-moz-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
-o-box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
box-shadow:inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #032b3a, 1px 1px 0px 0px #044a64, 2px 2px 0px 0px #044a64, 2px 5px 0px 0px #044a64, 6px 4px 2px #0b698b, 0px 10px 5px #999 ;
}
/*
Third button
*/
.third_button::before {
content: url('menu.png');
}
Script:
<script>
$(document).ready(function(){
$('#trt a').click(function(e){ //where menu is the id of your menu item
e.preventDefault();
$('#tst').slideToggle(); // where content is the id of your content div
});
//ORIGINALLY THE MENU should be hidden out of the user's view.
//ON CLICKING ON MENU the `tst` div will slide down, the menu button should be in `active` status.
//ON CLICKING ON MENU again the `tst` div will slide up and out of view and the menu button should be in `normal` status
});
</script>
What I am looking to do is have the tst div out of view when the page loads. When the user clicks on the a link which is a button, the tst div should slide to the right and be placed on right of the link.
Starts with this:
When the user clicks on the menu the tst div should animate and slide to the right and should look like this:
Finally, when the user clicks on the menu link again, the tst div slide to the left and out of the user's view.
How do I achieve that?

Try this fiddle. Added float: left to both the button and menu http://jsfiddle.net/borglinm/sp3ju/3/
JavaScript
$(document).ready(function(){
$('#trt a').click(function(e){
e.preventDefault();
console.log($('#tst').css("left"));
if($('#tst').css("left") === "-350px") {
$('#tst').animate({"left": 0});
}
else
{
$('#tst').animate({"left": -350});
}
});
});
Relevant CSS addition
body {
margin: 0;
}
.a_demo_three {
display: inline-block;
}

Look at this: jsFiddle.
Added float:left to both the divs.

Javascript with Twitter's typeahead.js ruining my form's layout

So I have a script that uses the typeahead to pull up data from my database:
<script type="text/javascript">
$(document).ready(function() {
$("#navPersonSearch").typeahead({
name: 'people',
remote: 'name_autocomplete/?q=%QUERY'
})
.keydown(function(e) {
if (e.keyCode === 13) {
$("form").trigger('submit');
}
});
});
</script>
This is what my form looks like without the script
And this is what it looks like with the script:
This is the html on the page (using bootstrap 3):
<div class="jumbotron">
<div class="container">
<h1 align="center">Search</h1>
<div class="row">
<div class="col-lg-12">
<form id="search_form" align="center" action="/search/" class="form-inline" method ="get" role="form">
<input id="navPersonSearch" class="input form-control" type="text" name="q"
placeholder="Search for Actor/Actress"
autocomplete="off" >
</form>
</div> <!-- /.col -->
</div> <!-- /.row -->
</div> <!-- /.container -->
</div> <!-- /.jumbotron -->
I'm not sure why the script is messing with my form's layout.

After some research, it looks like this is a known issue with Bootstrap 3: https://github.com/twitter/typeahead.js/issues/378
People have made some fixes to it, but the fixes aren't completely universal, you'd have to tweak the properties yourself to actually get it to work properly. The fix that I'm starting off with is this: http://jsfiddle.net/ragulka/Dy9au/1/
.twitter-typeahead {
width: 100%;
position: relative;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
margin: 0;
width: 100%;
color: #555555;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.has-warning .twitter-typeahead .tt-query,
.has-warning .twitter-typeahead .tt-hint {
border-color: #c09853;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-error .twitter-typeahead .tt-query,
.has-error .twitter-typeahead .tt-hint {
border-color: #b94a48;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.has-success .twitter-typeahead .tt-query,
.has-success .twitter-typeahead .tt-hint {
border-color: #468847;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.twitter-typeahead .tt-query:focus,
.twitter-typeahead .tt-hint:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
.has-warning .twitter-typeahead .tt-query:focus,
.has-warning .twitter-typeahead .tt-hint:focus {
border-color: #a47e3c;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.has-error .twitter-typeahead .tt-query:focus,
.has-error .twitter-typeahead .tt-hint:focus {
border-color: #953b39;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.has-success .twitter-typeahead .tt-query:focus,
.has-success .twitter-typeahead .tt-hint:focus {
border-color: #356635;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.twitter-typeahead .tt-hint {
color: #a1a1a1;
z-index: 1;
border: 1px solid transparent;
}
.twitter-typeahead .tt-query {
z-index: 2;
}
.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
}
.twitter-typeahead .input-sm.tt-query,
.twitter-typeahead .hint-sm.tt-hint {
border-radius: 3px;
}
.twitter-typeahead .input-lg.tt-query,
.twitter-typeahead .hint-lg.tt-hint {
border-radius: 6px;
}
.input-group .twitter-typeahead:first-child .tt-query,
.input-group .twitter-typeahead:first-child .tt-hint {
border-radius: 4px 0 0 4px !important;
}
.input-group .twitter-typeahead:last-child .tt-query,
.input-group .twitter-typeahead:last-child .tt-hint {
border-radius: 0 4px 4px 0 !important;
}
.input-group.input-group-sm .twitter-typeahead:first-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:first-child .tt-hint {
border-radius: 3px 0 0 3px !important;
}
.input-group.input-group-sm .twitter-typeahead:last-child .tt-query,
.input-group.input-group-sm .twitter-typeahead:last-child .tt-hint {
border-radius: 0 3px 3px 0 !important;
}
.input-sm.tt-query,
.hint-sm.tt-hint,
.input-group.input-group-sm .tt-query,
.input-group.input-group-sm .tt-hint {
height: 30px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.input-group.input-group-lg .twitter-typeahead:first-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:first-child .tt-hint {
border-radius: 6px 0 0 6px !important;
}
.input-group.input-group-lg .twitter-typeahead:last-child .tt-query,
.input-group.input-group-lg .twitter-typeahead:last-child .tt-hint {
border-radius: 0 6px 6px 0 !important;
}
.input-lg.tt-query,
.hint-lg.tt-hint,
.input-group.input-group-lg .tt-query,
.input-group.input-group-lg .tt-hint {
height: 45px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
}
.tt-dropdown-menu {
width: 100%;
min-width: 160px;
margin-top: 2px;
padding: 5px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
*border-right-width: 2px;
*border-bottom-width: 2px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
.tt-suggestion {
display: block;
padding: 3px 20px;
}
.tt-suggestion.tt-is-under-cursor {
color: #fff;
background-color: #0081c2;
background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
background-image: -o-linear-gradient(top, #0088cc, #0077b3);
background-image: linear-gradient(to bottom, #0088cc, #0077b3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.tt-suggestion.tt-is-under-cursor a {
color: #fff;
}
.tt-suggestion p {
margin: 0;
}