We Keep Coding

Hovering on animated navbar goes wrong

I have a problem.
I have an animated navigation bar on my html website, so that if you scroll it'll change. But I want that if I'm hovering on the changed navbar, it'll change back to his normal state. But that doesn't work at all. I hope you guys can help me.
Code here:
window.addEventListener("scroll", function(){
var header = document.querySelector(".navbar");
header.classList.toggle("sticky", window.scrollY > 0);
});
let navbar = document.querySelector(".sticky");
navbar.addEventListener("mouseover", function( event ){
navbar.classList.toggle("navbar", navbar.onmouseover);}
, false);
body{
margin: 0 0 0 0;
padding: 0;
}
.head {
display: inline-block;
position: absolute;
margin: 0;
background-image: url('pictures/head.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
padding: 0;
text-align: center;
height: 500px;
width: 100%;
}
.head h1 {
color: white;
text-align: center;
padding: 100px 100px 25px;
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 50px;
}
.head h2 {
font-family: Copperplate, Monaco, "Lucida Console", monospace;
font-size: 30px;
color: white;
}
.navbar .dropbtn {
background-color: white;
color: black;
padding: 16px 16px 14px 16px;
font-size: 20px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: black;
transition: 0.6s;
}
.sticky .dropbtn {
background: none;
color: black;
padding: 16px 16px 14px 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-left: none;
border-right: 1px solid grey;
color: white;
transition: 0.6s;
}
.navbar {
z-index: 1;
overflow: visible;
background-color: white;
position: fixed;
top: 0;
width: 100%;
float: left;
transition: 0.6s;
.navbar .dropdownlinks {
float: left;
}
}
.dropdown {
position: relative;
display: inline-block;
margin: -2px;
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
background-color: white;
z-index: 1;
box-shadow: 0px 8px 16px 0px black;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
border-bottom: 1px solid black;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: red;
color: white;
}
.navbar img {
width: 50px;
height: 50px;
border-right: 1px solid grey;
padding-right: 4px;
top: 0;
float: left;
}
.dropdown-content a:hover {
color: white;
background-color: red;
}
.sticky {
background: none;
transition: 0.6s;
}
<header>
<div class="navbar">
<img src="pictures/gear_icon.png" alt="icon">
<div class="dropdownlinks">
<div class="dropdown">
<button class="dropbtn">F1 history</button>
<div class="dropdown-content">
All the teams
All world champions
</div>
</div>
<div class="dropdown">
<button class="dropbtn">News and times</button>
<div class="dropdown-content">
Driver and team news
Liveblog
Calender
Archives
</div>
</div>
<div class="dropdown">
<button class="dropbtn">This season</button>
<div class="dropdown-content">
Driver's standings
Constructor's standings
All current drivers
All current teams
</div>
</div>
</div>
</div>
</header>
It's a formula 1 website btw, so if you love formula 1 please help me:)

Open and Close a div by click on link and close by X button

I created and it works perfectly ok But it only runs for one time, Means by clicking on a "Subscribe to Trade Alert" link a div box opens and says subscribe and have an x mark to close that div, but after closing If I again open a div by clicking a same link it is not working for the second time. I want it to run infinite.
heres the code:
.trade-alert
{
width: 180px;
height: 26px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #333;
}
.subscription-trade-alert-box
{
width: 423px;
height: 177px;
border: 1px solid #DAE2ED;
box-shadow: 2px 2px 5px rgba(83,100,122,.35);
background-color: #fff;
overflow: hidden;
display: none;
position: relative;
left: 200px;
}
.close
{
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
display: block;
transform: translate(0%, -50%);
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.scc-trade-alert-tips
{
width: 180px;
height: 16px;
display: inline-block;
position: relative;
font-size: 14px;
line-height: 16px;
padding: 5px 5px 5px 25px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
color: #1686CC;
cursor: pointer;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.tips-icon-mail
{
width: 16px;
height: 16px;
position: absolute;
left: 5px;
top: 2px;
width: 16px;
height: 16px;
background: url(images/mail-ta.png) no-repeat 0 -25px;
font-family: 'Roboto', sans-serif;
}
.trade-alert-focus-anchor:focus .subscription-trade-alert-box
{
display: block;
}
<a class="trade-alert-focus-anchor" href="#">
<div class="trade-alert">
<div class="scc-trade-alert-tips">
<i class="tips-icon-mail" ></i>
Subscribe to Trade Alert
</div>
</div>
<div class="subscription-trade-alert-box">
<span class="close">×</span>
Subscribe
</div>
<script>
var closebtns = document.getElementsByClassName("close");
var i;
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
</script>
</a>
How to make this infinite open and close.

I fixed it that it opens multiple times without changing to much:
1st I changed the Box subscription-trade-alert-box to an ID instead of a class.
2nd I fixed the change from Class to ID in CSS
3rd I added an onclick event for the subscription link
4th added a JS line that the subrcription box style dispaly: block is set when clicked.
var closebtns = document.getElementsByClassName("close");
var i;
for (i = 0; i < closebtns.length; i++) {
closebtns[i].addEventListener("click", function() {
this.parentElement.style.display = 'none';
});
}
function showBox() {
document.getElementById("subscription-trade-alert-box").style.display = "block";
}
.trade-alert
{
width: 180px;
height: 26px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #333;
}
#subscription-trade-alert-box
{
width: 423px;
height: 177px;
border: 1px solid #DAE2ED;
box-shadow: 2px 2px 5px rgba(83,100,122,.35);
background-color: #fff;
overflow: hidden;
display: none;
position: relative;
left: 200px;
}
.close
{
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
display: block;
transform: translate(0%, -50%);
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.scc-trade-alert-tips
{
width: 180px;
height: 16px;
display: inline-block;
position: relative;
font-size: 14px;
line-height: 16px;
padding: 5px 5px 5px 25px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
color: #1686CC;
cursor: pointer;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.tips-icon-mail
{
width: 16px;
height: 16px;
position: absolute;
left: 5px;
top: 2px;
width: 16px;
height: 16px;
background: url(images/mail-ta.png) no-repeat 0 -25px;
font-family: 'Roboto', sans-serif;
}
.trade-alert-focus-anchor:focus #subscription-trade-alert-box
{
display: block;
}
<a class="trade-alert-focus-anchor" href="#">
<div class="trade-alert">
<div class="scc-trade-alert-tips" onclick="showBox()">
<i class="tips-icon-mail" ></i>
Subscribe to Trade Alert
</div>
</div>
<div id="subscription-trade-alert-box">
<span class="close">×</span>
Subscribe
</div>
</a>

Use onclick event in javascript instead of :focus in css.
<div class="trade-alert">
<div class="scc-trade-alert-tips" onclick="document.getElementById('subscription-trade-popup').style = 'display: block;'">
<i class="tips-icon-mail"></i>
Subscribe to Trade Alert
</div>
</div>
<div class="subscription-trade-alert-box" id="subscription-trade-popup">
<span class="close">×</span>
Subscribe
</div>

By setting .style = 'none' at the element level, it overrules the css level rule. Instead, you can remove the css rule and simply add another event listener to toggle the style between block and none.
Also, I'd reccomend using document.querySelector() and document.querySelectorAll(), as they are the modern standard for selecting elements.
.trade-alert
{
width: 180px;
height: 26px;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
color: #333;
}
.subscription-trade-alert-box
{
width: 423px;
height: 177px;
border: 1px solid #DAE2ED;
box-shadow: 2px 2px 5px rgba(83,100,122,.35);
background-color: #fff;
overflow: hidden;
display: none;
position: relative;
left: 200px;
}
.close
{
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
display: block;
transform: translate(0%, -50%);
color: #333;
font-size: 16px;
font-family: 'Roboto', sans-serif;
}
.scc-trade-alert-tips
{
width: 180px;
height: 16px;
display: inline-block;
position: relative;
font-size: 14px;
line-height: 16px;
padding: 5px 5px 5px 25px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 25px;
color: #1686CC;
cursor: pointer;
vertical-align: baseline;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.tips-icon-mail
{
width: 16px;
height: 16px;
position: absolute;
left: 5px;
top: 2px;
width: 16px;
height: 16px;
background: url(images/mail-ta.png) no-repeat 0 -25px;
font-family: 'Roboto', sans-serif;
}
/* remove this
.trade-alert-focus-anchor:focus .subscription-trade-alert-box
{
display: block;
}
*/
<a class="trade-alert-focus-anchor" href="#">
<div class="trade-alert">
<div class="scc-trade-alert-tips">
<i class="tips-icon-mail" ></i>
Subscribe to Trade Alert
</div>
</div>
<div class="subscription-trade-alert-box">
<span class="close">×</span>
Subscribe
</div>
</a>
<script>
document.querySelectorAll('.close').forEach(function(close) {
close.addEventListener('click', function(e) {
e.stopPropagation(); //otherwise the click will bubble and reopen itself
this.parentElement.style.display = 'none';
});
});
document.querySelector('.trade-alert-focus-anchor')
.addEventListener('click', function() {
document.querySelector('.subscription-trade-alert-box')
.style.display = 'block';
});
</script>

JavaScript adds styles as inline css. So if you add a style with JS then also remove it with JS. This line is adding the display: none; as an inline style,
this.parentElement.style.display = 'none';
I made a codepen where I used JS to open and close the popup/modal, by assigning display: block to show and display:none; to hide.
Codepen Link

Keep tooltip within parent container?

I cannot figure out a way to keep the tooltip inside the "main-content" container. Here's the code:
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
white-space: nowrap;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
Is there any way to push it back inside?
Or add an max-width to the tooltip somehow? I tried to add max-width, but it didn't work because of [data-tooltip]'s display:inline;.
(I know that replacing "inline" with "block" would solve the problem with max-width, but I can't do that because I need to keep the text inline...)

Don't know how to make it word responsive, don't know if is even possible with only css - tooltips are for short mesages.
But it's a start
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
/* width: 250px; */
min-width: 200px;
/* max-width: 400px; */
height: 50px;
overflow: auto;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>

Javascript to reveal hidden DIV

I have been working on a code to display more details when an item is clicked. So far I have come up with this.
HTML:
<script>
$(document).ready(function(){
$('.toggleTarget').hide();
$(".products-item")
.click(function() {
var id = $(this).attr('data-number');
var toggleTargetId = $(this).attr('data-target');
var toggleTarget = $(document.getElementById(toggleTargetId));
if ( id.val() === "0" ) {
toggleTarget.show("slow", "swing");
id.val(1)
} else {
toggleTarget.hide("slow", "swing");
id.val(0)
}
});
});
</script>
<div id="info-1-btn" class="products-item" data-target="info-1" data-number="0">
<div class="products-item-img buoy-1"></div><br />
<div class="products-item-text">Sign Float</div>
<div class="products-item-details">
<div id="info-1" class="products-item-details toggleTarget">
<table class="products-item-details-table" cellpadding="15px">
<tr>
<th>Sizes:</th>
<th>Material:</th>
</tr>
<tr>
<td>500mm</td>
<td>*MATERIAL*</td>
</tr>
</table>
</div>
</div>
</div>
CSS:
.products-item {
height: auto;
width: 300px;
display: inline-block;
margin: 10px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
border: solid 2px #f5f5f5;
border-radius: 10px;
background-color: #f5f5f5;
cursor: pointer;
transition: all 0.25s ease-in-out;
}
.products-item-img {
height: auto;
width: auto;
display: inline-block;
border-radius: 140px;
transition: all 0.25s ease-in-out;
z-index: 10;
}
.products-item-text {
width: auto;
height: auto;
bottom: 0px;
left: 0px;
margin: 10px;
padding: 15px;
display: inline-block;
font-family: Comfortaa;
font-size: 14px;
text-align: center;
border-radius: 5px;
color: #333;
background-color: transparent;
transition: all 0.25s ease-in-out;
}
.products-item:hover {
background-color: #bae9ff;
border: solid 2px #bae9ff;
}
.products-item:hover .products-item-text {
color: #000;
border-radius: 5px;
}
.products-item-details-table {
background-color: transparent;
width: 100%;
font-family: Comfortaa;
font-size: 14px;
padding-top: 20px;
padding-bottom: 20px;
table-layout: fixed;
white-space: nowrap;
/*border-collapse: collapse; REMOVE BORDER GAPPING */
}
.products-item-details-table tr {
background-color: #fff;
width: 600px;
}
.products-item-details-table th {
background-color: #ccc;
color: #fff;
font-size: 15px;
font-weight: normal;
width: auto;
border: none;
text-align: center;
}
.products-item-details-table td {
background-color: #fff;
width: 200px;
text-align: left;
}
I am looking to reveal products-item-details when I click on the selected products-item div.
If you require more information, please let me know.
Thank you.

i cant redirect and go to a specific section

i am trying to redirect to this page and go a specific part of the page, which is powered by java script to move around. i want to be able to go to say, delete section. but i cant achieve it using localhost/entry.php#delete . what am i doing wrong? below is the snippet.
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
var $tab = $(this),
href = $tab.attr('href');
$('.active').removeClass(ACTIVE_CLASS);
$tab.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$(href)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
});
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>

Anchors apply just for simple navigation around the page, for changing tabs etc. you need to add some extra code, something like:
(function($) {
// constants
var SHOW_CLASS = 'show',
HIDE_CLASS = 'hide',
ACTIVE_CLASS = 'active';
switchTab = function(href){
var $link = $('a[href=' + href + ']'),
$tab = $(href);
$('.active').removeClass(ACTIVE_CLASS);
$link.addClass(ACTIVE_CLASS);
$('.show')
.removeClass(SHOW_CLASS)
.addClass(HIDE_CLASS)
.hide();
$($tab)
.removeClass(HIDE_CLASS)
.addClass(SHOW_CLASS)
.hide()
.fadeIn(550);
}
$('.tabs').on('click', 'li a', function(e) {
e.preventDefault();
switchTab($(this).attr('href'));
});
if(window.location.hash){
switchTab(window.location.hash);
}
})(jQuery);
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
#import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body {
background: #1a1a1a;
color: white;
font-family: 'Roboto';
}
.flat-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
height: 450px;
position: relative;
font-family: 'Roboto';
}
.red-form {
background: #e74c3c;
margin: 25px auto;
width: 80%;
position: relative;
font-family: 'Roboto';
padding: 15px;
}
label {
font-weight: bold;
}
.tabs {
background: #c0392b;
height: 40px;
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
position: relative;
display: block;
margin-bottom: 20px;
}
.tabs li {
display: block;
float: left;
margin: 0;
padding: 0;
}
.tabs a {
background: #c0392b;
display: block;
float: left;
text-decoration: none;
color: white;
font-size: 16px;
padding: 12px 22px 12px 22px;
/*border-right: 1px solid #tab-border;*/
}
.tabs li:last-child a {
border-right: none;
width: 174px;
padding-left: 0;
padding-right: 0;
text-align: center;
}
.tabs a.active {
background: #e74c3c;
border-right: none;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.form-action {
padding: 0 20px;
position: relative;
}
.form-action h1 {
font-size: 42px;
padding-bottom: 10px;
}
.form-action p {
font-size: 12px;
padding-bottom: 10px;
line-height: 25px;
}
form {
padding-right: 20px !important;
}
form input[type=text],
form input[type=password],
form input[type=submit] {
font-family: 'Roboto';
}
form input[type=text],
form input[type=password] {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding-left: 15px;
background: #fff;
border: none;
color: #e74c3c;
outline: none;
}
.dark-box {
background: #5e0400;
box-shadow: 1px 3px 3px #3d0100 inset;
height: 40px;
width: 50px;
}
.form-action .dark-box.bottom {
position: absolute;
right: 0;
bottom: -24px;
}
.tabs + .dark-box.top {
position: absolute;
right: 0;
top: 0px;
}
.show {
display: block;
}
.hide {
display: none;
}
.button {
border: none;
display: block;
background: #136899;
height: 40px;
width: 80px;
color: #ffffff;
text-align: center;
border-radius: 5px;
/*box-shadow: 0px 3px 1px #2075aa;*/
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
font-weight: bold;
}
.button:hover {
background: #1e75aa;
/*box-shadow: 0 3px 1px #237bb2;*/
}
.button:active {
background: #136899;
/*box-shadow: 0 3px 1px #0f608c;*/
}
::-webkit-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
:-moz-placeholder {
/* Firefox 18- */
color: #e74c3c;
font-weight: bold;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #e74c3c;
font-weight: bold;
}
:-ms-input-placeholder {
color: #e74c3c;
font-weight: bold;
}
select {
margin: 10px;
border: 1px solid #111;
background: transparent;
width: 300px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
font-weight: bold;
color: #504848;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div class="container">
<div class="flat-form">
<ul class="tabs">
<li>
Insert
</li>
<li>
Update
</li>
<li>
Delete
</li>
</ul>
<div id="insert" class="form-action show">
<h1>Insert</h1>
<p>
insert data goes here
</p>
</div>
<div id="update" class="form-action hide">
<h1>Update</h1>
<p>
update data goes here
</p>
</div>
<div id="delete" class="form-action hide">
<h1>Delete</h1>
<p>
delete data goes here
</p>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>