I really like the search bar on this website, https://www.marmosetmusic.com/
I can do it very basically using CSS steps animation but it doesn't look smooth and I have to change the timing based on the length of the placeholder.
Also, I am not sure how to overlay it as such over an image or parallax design.
What I have tried is:
HTML:
<title>Search</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="css/type-style.css" media="screen" type="text/css" />
<script src="js/modernizr.js"></script>
</head>
<body>
<h1>
<i class='fa fa-anchor'></i>
Test.com
</h1>
<div class='overlay'></div>
<div class='wrapper'>
<form class='search'>
<input placeholder="search..." required='true' type='text'>
<button class='search-button'>
<i class='fa fa-search'></i>
</button>
</form>
</div>
<script src="js/index.js"></script>
</body>
</html>
CSS:
#import url(http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:300,400);
body {
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/16902/holidayphoto.jpg);
background-position: 0 90%;
overflow: hidden;
}
body, html {
height: 100%;
}
h1 {
color: #fff;
font-size: 3.5em;
text-align: center;
font-family: 'Alegreya Sans SC', sans-serif;
padding: 20px;
font-weight: 300;
opacity: 1;
}
h1 i {
color: #e74c3c;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
background: #000;
opacity: 0.92;
top: 0;
left: 0;
}
.wrapper {
width: 560px;
height: 60px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -280px;
margin-top: -20px;
-webkit-font-smoothing: antialiased;
z-index: 999999;
}
input[type="text"] {
font-family: 'Alegreya Sans SC', sans-serif;
width: 480px;
height: 40px;
padding: 10px 0 10px 20px;
font-size: 24px;
font-weight: 300;
color: #eee;
background: #222;
border: none;
float: left;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
input:focus {
color: #fff;
outline: none;
background: #1a1a1a;
}
button[type="submit"], .search-button {
border: 0;
width: 60px;
height: 60px;
background: #222222;
border-left: solid 5px #222222;
text-align: center;
float: left;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
button[type="submit"] i, .search-button i {
color: #fff;
font-size: 40px;
line-height: 1.4em;
}
.search-button:focus {
outline: none;
}
.search-button:hover {
background: #e53f2e;
border-left: #e53f2e;
}
.switch-wrapper {
font-family: 'Alegreya Sans SC', sans-serif;
width: 70px;
height: 40px;
margin: 10px;
border-radius: 40px;
position: absolute;
background: #444;
right: 118px;
cursor: pointer;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper:before {
position: absolute;
content: 'FLIGHT';
line-height: 2.7em;
left: -54px;
}
.switch-wrapper:after {
position: absolute;
content: '+ HOTEL';
line-height: 2.7em;
right: -60px;
}
.switch-wrapper .switch {
width: 36px;
height: 36px;
margin: 2px 2px;
background: #222;
border-radius: 50%;
position: absolute;
}
.switch-wrapper .switch:hover {
background: #282828;
}
.rent {
position: absolute;
left: 30px;
}
.switch-wrapper.switched:after {
color: #3498db;
text-shadow: 0 0 4px #3498db;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.switched:before {
color: #cfcfcf;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.not-switched:after {
color: #cfcfcf;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.switch-wrapper.not-switched:before {
color: #3498db;
-webkit-transition: all 420ms ease-in-out;
-moz-transition: all 420ms ease-in-out;
-o-transition: all 420ms ease-in-out;
transition: all 420ms ease-in-out;
}
.not-valid {
display: none;
width: 100%;
height: 30px;
background: #e74c3c;
position: absolute;
opacity: 1;
top: 70px;
}
.not-valid span {
font-family: 'Alegreya Sans SC', sans-serif;
color: #fff;
padding: 10px;
line-height: 1.96em;
}
.not-valid span i {
padding-right: 4px;
}
.not-valid span .error-close {
color: #7b190f;
float: right;
padding: 7px 10px 0 0;
cursor: pointer;
}
label.error {
display: none !important;
}
JS
var s = $('.switch');
var sw = $('.switch-wrapper');
$('input').on('click', function(a) {
a.preventDefault();
});
function switchToggle() {
s.stop(false,true).animate({left: "0"}, 200);
}
s.on('click', function() {
if (sw.hasClass('switched')) {
switchToggle();
} else if (sw.hasClass('not-switched')) {
s.stop(false,true).animate({left: "30px"}, 200);
}
sw.toggleClass('switched not-switched');
});
$('.search').validate({
invalidHandler: function(event, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
$("div.not-valid span").html("<i class='fa fa-warning'></i> Please type search <i class='fa fa-times error-close'></i>");
// Should use .stop() function.
$(".not-valid").fadeIn();
setTimeout(function() {
$(".not-valid").fadeOut();
}, 2000);
$('.error-close').on('click', function() {
$(".not-valid").fadeOut();
});
} else {
$(".not-valid").fadeOut();
}
}
});
All in one is found in this jsfiddle demo.
Any help would be appreciated!
Here is a simple example of how to style a search field in a similar manner as seen in your example. display: flex does most of the magic here, the rest is getting rid of backgrounds and borders or styling the submit button with an image
For the typing animation you should use a premade plugin like typed.js
.search {
background: rgba(0, 0, 0, 0.1);
display: flex;
}
.search input {
border: 0px;
margin: 0px;
padding: 0px;
}
.search input[type="text"] {
flex: 1;
background: transparent;
font-size: 2em;
}
.search input[type="submit"] {
font-size: 2em;
margin: 4px;
width: 1em;
height: 1em;
cursor: pointer;
background-color: transparent;
background-image: url(https://cdn0.iconfinder.com/data/icons/basic-lines/39/search-512.png);
background-size: cover;
}
.search input:focus {
outline: none;
}
<div class="search">
<input type="text" name="search">
<input type="submit" value="">
</div>
Related
Is it possible to have the same CSS transformation execute when the input has been autofilled using pseudo="-internal-input-suggested as it does when the input is focused?
In this case, if the input has been autofilled, then it applies transform: translatey(-23px);. Currently if there is any autofilled information in the input, the label covers the input, and only when you tap body does the input receive the focus state as seen in the screenshot below:
* {
box-sizing: border-box;
}
.input__html {
display: flex;
flex-direction: column
}
.input__label {
width: 100%;
margin: 6px 0;
position: relative;
border-radius: 3px;
color: #868ca0;
}
.input__label .input__span {
position: absolute;
font-weight: 700;
top: 18px;
padding: 0px 6px;
left: 6px;
background: white;
font-size: 14px;
color: #868ca0;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
pointer-events: none;
}
.input__label .input__focus {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.input__label input {
border: 1px solid #e4e4e4;
background: #ffffff00;
color: #6f6666;
font-weight: 700;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
font-family: inherit;
border-radius: 3px;
padding: 0px 12px;
height: 48px;
font-size: 16px;
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.input__label input[value]+.input__span,
.input__label input:valid+.input__span,
.input__label input:not(:placeholder-shown)+.input__span,
.input__label input:focus+.input__span {
-webkit-transform: translatey(-23px);
transform: translatey(-23px);
outline: none;
}
.input__label input:focus {
outline: none;
}
<div class="input__html">
<label class="input__label">
<input name="input" type="text" required autocomplete="username" placeholder=" ">
<span class="input__span">Name</span>
<span class="input__focus"></span>
</label>
</div>
The solution was to access the autocomplete :-webkit-autofill:
.input__label input:-webkit-autofill + .input__span,
.input__label textarea:-webkit-autofill + .input__span,
is there a way to remove invisible space on top/bottom of a <a> tag.
I have tryed removing paddings, margins and other positions.
HTML:
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn"><div class="cog"></div></button>
<div id="myDropdown" class="dropdown-content">
<div class="dop"></div>
Text
</div>
</div>
CSS:
.dropbtn {
height: 34px;
width: 34px;
background: #f0f0f0;
border-radius: 3px;
border: none;
cursor: pointer;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
vertical-align: none;
}
.dropbtn:hover, .dropbtn:focus {
background: #ebebeb;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 100px;
margin-left: 100px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
width: 140px;
border-radius: 3px;
left: -53px;
top: 48px;
}
.dropdown-content a {
color: #b7b7b7;
text-decoration: none;
font-family: OpenSans-Regular;
font-size: 12px;
text-align: center;
display: block;
outline-width: 0px;
}
.show {display:block;}
This is how it looks right now -
This is how it should look like -
Kinds regards, Ričards.
I think you are talking about the line-height property. Try using a low value :
line-height: .8em;
There is no extra padding or margin at the top and bottom of text.
This is normal behaviour of font specification:
Font-size is defined by 13, the white spaces are defined by 14 and probably 15 (since you don't have letters with parts below baseline).
You can override this by force line-height lower than font-size. But you must remember that every font has got different 14 in specification and you must choose ratio line-height/font-size (for example 0.8em) by experiment.
Change line-height to 10px or 12px as you find according to your needs
body {
background: #e0e0e0;
}
.dropbtn {
height: 34px;
width: 34px;
background: #f0f0f0;
border-radius: 3px;
border: none;
cursor: pointer;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
vertical-align: none;
}
.dropbtn:hover, .dropbtn:focus {
background: #ebebeb;
}
.dropdown {
position: relative;
display: inline-block;
margin-top: 100px;
margin-left: 100px;
}
.dropdown-content {
position: absolute;
background-color: #ffffff;
width: 140px;
border-radius: 3px;
left: -53px;
top: 48px;
}
.dropdown-content a {
color: #b7b7b7;
text-decoration: none;
font-family: OpenSans-Regular;
font-size: 12px;
text-align: center;
display: block;
outline-width: 0px;
line-height: 12px;
}
.show {display:block;}
<div class="dropdown">
<button class="dropbtn"><div class="cog"></div></button>
<div id="myDropdown" class="dropdown-content">
<div class="dop"></div>
Text
</div>
</div>
Hi I'm using a bootstrap template to display some map tools but I been having problems with css of the div containing the map-canvas when I collapse the side panel the map moves to the proper place but live blank space on the opposite side and also there is a big issue with the height of the map.
I'm looking to place the map to full extend when sidepanel is collapsed or extended tried everything without success, I will appreciate any help from the stackoverflow community.
Thanks in advance.
here is a link to my page https://secure.cevamhn.net/AirAid/maptoolsair.php
css code here:
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
#wrapper {
padding-left: 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 0px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0; /* disini agar ketika di kecilkan tidak hilang semua default 0*/
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 0px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -150px;
}
/*------------------------------------------------ MAP FEATURES BEGIN ----------------------------------*/
#map-canvas {
height: 100%;
width: 100%;
margin-left: 0px;
padding: 0px;
}
#drawPanel {
position: absolute;
width: 200px;
font-family: Arial, sans-serif;
font-size: 13px;
float: left;
margin-top: 5px;
margin-left: 200px;
z-index: 1000;
}
#color-palette {
clear: both;
}
.color-button {
width: 20px;
height: 20px;
font-size: 0;
margin: 2px;
float: left;
cursor: pointer;
}
#delete-button {
margin-top: 0px;
margin-left: 22px;
}
#wrapper.toggled #map-canvas #drawPanel #color-palette.color-button #delete-button {
position: absolute;
}
#botLeft{
color: red;
font-weight: bold;
border: 0px solid;
background-color: transparent;
}
#botRight{
color: red;
font-weight: bold;
border: 0px solid;
background-color: transparent;
}
input {
color: White;
font-weight: bold;
border: 0px solid;
background-color: transparent;
text-align: left;
}
#opacity {
color: black;
font-weight: bold;
background-color: white;
width: 30px;
height: 20px;
margin-left: 5px;
}
/*------------------------------------------------ END MAP FEATURES ----------------------------------*/
.fixed-brand{
width: auto;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
margin-top: 2px;
}
.sidebar-nav li {
text-indent: 15px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
border-left: red 2px solid;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
.no-margin{
margin:0;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
.fixed-brand{
width: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#wrapper.toggled-2 #sidebar-wrapper {
width: 50px;
}
#wrapper.toggled-2 #sidebar-wrapper:hover {
width: 250px;
}
#page-content-wrapper {
padding: 0px;
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#map-canvas {
padding: 442px; /* ------------------------------- If left at 0 Map is not Display ---------------------- */
position: relative;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
padding-left: 200px;
}
#wrapper.toggled #map-canvas #map-canvas {
position: relative;
margin-right: 0px;
padding-left: 0px;
}
#wrapper.toggled-2 #page-content-wrapper {
position: relative;
margin-right: 0px;
margin-left: -220px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled-2 #map-canvas #map-canvas #drawPanel #color-palette.color-button #delete-button {
position: relative;
margin-right: 0px;
margin-left: 0px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
}
When ever the size of the div containing your map changes, you need to trigger the 'resize' event on your Map object.
google.maps.event.trigger(map, 'resize');
Also, by changing:
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 0px;
}
to:
#page-content-wrapper {
min-width: 100%;
position: absolute;
padding: 0px;
}
the element stays the width of the space.
I am trying to do a image caption with slide. I have done everything, but the text inside the slide does not wrapped within the slide box. Someone please help in this.
use the JSfiddle link to view the code:
http://jsfiddle.net/anba/t31a4xq0/
HTML
</head>
<body>
<div id="mainwrapper">
<!-- Image Caption 1 -->
<div id="box-1" class="box">
<img id="image-1" src="https://pbs.twimg.com/profile_images/378800000247666963/9b177e5de625a8420dd839bb1561280d.jpeg" width="300" height="200"/>
<span class="caption simple-caption">
<div class="blogp">
Simple Caption
<p >1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950</p>
</div>
</span>
</div>
</body>
</html>
CSS
#mainwrapper {
/*font: 18pt normal Arial, sans-serif;*/
height: auto;
/*margin: 5px 10px ;*/
/*text-align: center;*/
width: 300px;
overflow: visible;
}
/* Image Box Style */
#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
height: 182px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 300px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
cursor: text;
}
/* Caption Common Style */
#mainwrapper .box .caption {
background-color: rgba(0,0,0,0.7);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 1: Simple **/
#mainwrapper .box .simple-caption {
height: 150px;
width: 300px;
display: block;
bottom: -70px;
cursor: text; /*line-height: 100pt;*/
text-align: left;
}
/** Simple Caption :hover Behaviour **/
#mainwrapper .box:hover .simple-caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-40%);
opacity: 1;
transform: translateY(-40%);
}
.blogp{
font-family: Verdana, Geneva, sans-serif;
font-size: 10pt;
color: #FF8000;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:100%;
}
.blogp a{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 14pt;
color: #0080C0;
padding: 3px 5px 3px 5px;
text-decoration: none;
width:400px;
}
Look at the numbers i had used in the html. I have enter 1-50 but it displays only to 23 and the text is not getting wrapped to the next line.
Simply add to your css:
.blogp p{
word-wrap: break-word;
}
UPDATE of your : JSFiddle
I found this tabbed content and so far set it up but for the life of me cannot figure out how to change the colour of the tab to a difference colour when you hover over it.
I thought it would be the tabs label:hover but it doesn't seem to be.
My code is here:
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #ffffff;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 670px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 0px 0px 0 0;
color: #ffffff;
font-size: 18px;
font-weight: normal;
font-family: helvetica;
background: #f3f3f3;
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #9eab05);
top: 1px;
}
/* LABEL COLOURS */
[id^=tab]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabfindme]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabtwitter]:checked + label {
background: #0085a1;
color: white;
top: 0;
}
[id^=tabtv]:checked + label {
background: #6a2150;
color: white;
top: 0;
}
[id^=tabteach]:checked + label {
background: #d10373;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
/* CONTENT COLOURS */
.findmecontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #e3ba12;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s; }
.twittercontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #0085a1;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.tvcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #6a2150;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.teachcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #d10373;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tabfindme">
<label for="tabfindme">FIND ME</label>
<div id="tab-content1" class="findmecontent animated fadeIn">
You can find me at the following venues:
<ul>
<li>BBC Television Centre</li>
<li>OutBurst Festival</li>
</ul>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tabtwitter">
<label for="tabtwitter">TWITTER</label>
<div id="tab-content2" class="twittercontent animated fadeIn">
Twitterfeed
</div>
</li>
<li>
<input type="radio" name="tabs" id="tabtv">
<label for="tabtv">TELEVISION</label>
<div id="tab-content3" class="tvcontent animated fadeIn">
Click the links to see me on TV
<ul>
<li>BBC Television Centre</li>
<li>ITV</li>
</ul>
</div>
</li>
<li>
<input type="radio" name="tabs" id="tabteach">
<label for="tabteach">HOW I TEACH</label>
<div id="tab-content4" class="teachcontent animated fadeIn">
How I teach
</div>
</li>
</li>
.tabs label:hover {
background: #9eab05;
top: 1px;
}
there is a ")" <-- remove it
fiddle
http://jsfiddle.net/n5ura/
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #ffffff;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 670px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 0px 0px 0 0;
color: #ffffff;
font-size: 18px;
font-weight: normal;
font-family: helvetica;
background: #f3f3f3;
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #9eab05;
top: 1px;
}
/* LABEL COLOURS */
[id^=tab]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabfindme]:checked + label {
background: #e3ba12;
color: white;
top: 0;
}
[id^=tabtwitter]:checked + label {
background: #0085a1;
color: white;
top: 0;
}
[id^=tabtv]:checked + label {
background: #6a2150;
color: white;
top: 0;
}
[id^=tabteach]:checked + label {
background: #d10373;
color: white;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
/* CONTENT COLOURS */
.findmecontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #e3ba12;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s; }
.twittercontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #0085a1;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.tvcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #6a2150;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
.teachcontent{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 12px;
line-height: 140%;
padding-top: 0px;
background: #d10373;
padding: 15px;
color: white;
position: absolute;
top: 40px;
left: 0;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
maybe change this ?
.tabs label:hover {
background: #9eab05;
top: 1px;
}
into :
.tabs label:hover {
background: #9eab05;
color:#000;
top: 1px;
}
if you want to change the color of the text. Or else change background into something else.
Use hover instead checked, example on the find me button
[id^=tabfindme]:hover + label {
background: red
color: white;
top: 0;
}