I found a form online, and now i am trying to modify it to put the phone and email text fields next to each other. And i kind of managed to get it, but the formatting is not quote right. The fields are to small and when i try to make a them bigger to they can match the full name field so phone field goes to where the full name ends, it doesn't work. I've been searching online and everything and can't get this to work. Any help would be very much appreciated.
.form-style-10 {
width: 900px;
padding: 30px;
margin: 40px auto;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: :0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
.form-style-10 .inner-wrap {
padding: 30px;
background: #F8F8F8;
border-radius: 6px;
margin-bottom: 15px;
}
.form-style-10 h1 {
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
.form-style-10 h1>span {
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-10 label {
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}
.form-style-10 input[type="text"],
.form-style-10 input[type="date"],
.form-style-10 input[type="datetime"],
.form-style-10 input[type="email"],
.form-style-10 input[type="number"],
.form-style-10 input[type="search"],
.form-style-10 input[type="time"],
.form-style-10 input[type="url"],
.form-style-10 input[type="password"],
.form-style-10 textarea,
.form-style-10 select {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border: 2px solid #fff;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}
.form-style-10 .section {
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}
.form-style-10 .section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 4px solid #fff;
font-size: 14px;
margin-left: -45px;
color: #fff;
margin-top: -3px;
}
.form-style-10 input[type="button"],
.form-style-10 input[type="submit"] {
background: #2A88AD;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
}
.form-style-10 input[type="button"]:hover,
.form-style-10 input[type="submit"]:hover {
background: #2A6881;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
.form-style-10 .privacy-policy {
float: right;
width: 250px;
font: 12px Arial, Helvetica, sans-serif;
color: #4D4D4D;
margin-top: 10px;
text-align: right;
}
<div class="form-style-10">
<h1>Request Your Quote<span>Request your free quote today!</span></h1>
<form>
<div class="section"><span>1</span>Contact Information</div>
<div class="inner-wrap" style="display:inline-block !important;">
<label>Your Full Name<input type="text" name="field1" /></label>
<div style="float:right !important; padding-right:50px; display:inline-block !important;"><label>Phone<input type="text" style="max-width:300px !important;" name="field1" /></label></div>
<div style="float:left !important; display:inline-block !important;padding-right: 300px;">
<label>Email<input type="text" style="max-width:300px !important;" name="field1" /></label></div>
</div>
<div class="button-section">
<input type="submit" name="Sign Up" />
<span class="privacy-policy">
<input type="checkbox" name="field7">You agree to our Terms and Policy.
</span>
</div>
</form>
</div>
Risking not providing a full solution, here's an attempt.
I made both inputs float to the left, added a width value to the inner wrap element (760px) and made both inputs 50% width.
.form-style-10 {
width: 900px;
padding: 30px;
margin: 40px auto;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
-moz-box-shadow: :0px 0px 10px rgba(0, 0, 0, 0.13);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13);
}
.form-style-10 .inner-wrap {
padding: 30px;
background: #F8F8F8;
border-radius: 6px;
margin-bottom: 15px;
width: 700px;
}
.form-style-10 h1 {
background: #2A88AD;
padding: 20px 30px 15px 30px;
margin: -30px -30px 30px -30px;
border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
}
.form-style-10 h1>span {
display: block;
margin-top: 2px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-10 label {
display: block;
font: 13px Arial, Helvetica, sans-serif;
color: #888;
margin-bottom: 15px;
}
.form-style-10 input[type="text"],
.form-style-10 input[type="date"],
.form-style-10 input[type="datetime"],
.form-style-10 input[type="email"],
.form-style-10 input[type="number"],
.form-style-10 input[type="search"],
.form-style-10 input[type="time"],
.form-style-10 input[type="url"],
.form-style-10 input[type="password"],
.form-style-10 textarea,
.form-style-10 select {
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
width: 100%;
padding: 8px;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border: 2px solid #fff;
box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
-webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.33);
}
.form-style-10 .section {
font: normal 20px 'Bitter', serif;
color: #2A88AD;
margin-bottom: 5px;
}
.form-style-10 .section span {
background: #2A88AD;
padding: 5px 10px 5px 10px;
position: absolute;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border: 4px solid #fff;
font-size: 14px;
margin-left: -45px;
color: #fff;
margin-top: -3px;
}
.form-style-10 input[type="button"],
.form-style-10 input[type="submit"] {
background: #2A88AD;
padding: 8px 20px 8px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12);
font: normal 30px 'Bitter', serif;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17);
border: 1px solid #257C9E;
font-size: 15px;
}
.form-style-10 input[type="button"]:hover,
.form-style-10 input[type="submit"]:hover {
background: #2A6881;
-moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
-webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28);
}
.form-style-10 .privacy-policy {
float: right;
width: 250px;
font: 12px Arial, Helvetica, sans-serif;
color: #4D4D4D;
margin-top: 10px;
text-align: right;
}
<div class="form-style-10">
<h1>Request Your Quote<span>Request your free quote today!</span></h1>
<form>
<div class="section"><span>1</span>Contact Information</div>
<div class="inner-wrap" style="display:inline-block !important;">
<label>Your Full Name<input type="text" name="field1" /></label>
<div style="float:left !important; display:inline-block !important; width: 50%;"><label>Phone<input type="text" style="max-width:300px !important;" name="field1" /></label></div>
<div style="float:left !important; display:inline-block !important; width: 50%;">
<label>Email<input type="text" style="max-width:300px !important;" name="field1" /></label></div>
</div>
<div class="button-section">
<input type="submit" name="Sign Up" />
<span class="privacy-policy">
<input type="checkbox" name="field7">You agree to our Terms and Policy.
</span>
</div>
</form>
</div>
Related
I am trying to make something similar to the button showed in picture.
I tried the following:
.button {
box-shadow:inset 0px 1px 0px 0px #ffffff;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color:#ededed;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
cursor:pointer;
color:red;
font-family:Arial;
font-size:12px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:0px 1px 0px #ffffff;
}
The above CSS3 code gave me the following:
I am not sure how to make the same button with a border that looks similar to the picture.
first of all the 4 parts of the box shadow are x offset y offset and blur and the spread I did some tweaks to your code and got this output.
.button {
box-shadow: inset 0px 0px 5px 2px #000;
background: qlineargradient(to bottom, #ededed 5%, #dfdfdf 100%);
background-color: #ededed;
border-radius: 6px;
border: 1px solid #dcdcdc;
display: inline-block;
cursor: pointer;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
padding: 6px 24px;
text-decoration: none;
text-shadow: 0px 1px 0px #ffffff;
}
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title>
</head>
<body>
<div class="button">
quit
</div>
</body>
</html>
There's no CSS property called qlineargradient so it's been removed. The box-shadow property in the example below has 3 values which makes layers top to bottom.
button {
display: inline-block;
padding: 6px 24px;
border: 1px solid #dcdcdc;
border-radius: 6px;
color: red;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-shadow: 0px 1px 0px #fff;
box-shadow:
rgba(50, 50, 93, 0.25) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
background-color: #fff;
cursor: pointer;
}
button:hover {
box-shadow:
rgba(50, 50, 93, 0.55) 0px 5px 8px -2px,
rgba(0, 0, 0, 0.35) 0px 3px 6px -3px,
rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}
<button>QUIT</button>
I am creating a button with a drop shadow effect (neumorphism) but when I apply my CSS to the button is just appears as a 2 toned solid button...Which part of the CSS am I using incorrectly? Are my drop shadow values wrong relative to the size of the button? Changing the width and height doesn't help.
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 35px;
}
.buysellbutton {
width: 44px;
height: 44px;
background: #F0F0F3;
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
border-radius: 16px;
}
<div class="css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class="buysellbutton">buy</button>
</div>
to remove black border from button just add broder-style:none to button. Added one more button with hover and active styling.
for creating Neumorphism effect you can check https://neumorphism.io/
.css-test {
background: #EAF0F8;
mix-blend-mode: normal;
border: 0.5px solid #FFFFFF;
box-shadow: 0px -30px 60px rgba(167, 179, 190, 0.35), 0px 30px 60px rgba(167, 179, 190, 0.35);
border-radius: 15px;
padding: 10px;
}
.buysellbutton {
width: 80px;
height: 44px;
border-style:none;
border-radius: 16px;
background: #F0F0F3;
box-shadow: 18px 18px 36px #c5c5c7,
-18px -18px 36px #ffffff;
outline:none;
}
.button {
width: 150px;
height: 50px;
background: #f3f0f1;
position: relative;
background: #f3f0f1;
margin-bottom: 25px;
border-radius: 32px;
text-align: center;
cursor: pointer;
transition: all 0.1s ease-in-out;
outline: none;
border-style: none;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
color: #6f6cde;
}
span {
font-size: 25px;
font-weight: semibold;
}
.button:hover {
opacity: 0.7;
box-shadow: -6px -6px 10px rgba(255, 255, 255, 0.8),
6px 6px 10px rgba(0, 0, 0, 0.2);
}
.button:active {
opacity: 1;
box-shadow: inset -4px -4px 8px rgba(255, 255, 255, 0.5),
inset 8px 8px 16px rgba(0, 0, 0, 0.1);
color: #79e3b6;
}
<div class="css-test">
<h3> Cash Flow: <span>CSS TEST</span></h3>
<button class="buysellbutton">buy</button>
<button class="button"><span>Buy</span></button>
</div>
First, use the below code at the top of all CSS
button{
all: unset;
}
and instead of
box-shadow: -10px -10px 30px 40% #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
use
box-shadow: -10px -10px 30px 40px #FFFFFF, 10px 10px 30px rgba(174, 174, 192, 0.4);
I am trying to get a box shadow on an element wrapped around an input when an input is in focus. but can't get it to work. I have probably structured the code wrong. Snippet bellow
.cam-peoplepicker-userlookup {
margin-right: 55em;
height: 7em;
min-width: 50%;
overflow: hidden;
border: 1px solid #99b0c1;
padding: 2px 5px 2px 5px;
background-color: white;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
#k:focus #divAdministrators {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
#*Project Manager*#
<div class="form-group">
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
<textarea id="k"></textarea>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
</div>
Thank you all for all the suggestions. really appreciate it!!!
Although you are not using jQuery, but if you would like to use jQuery it may be helpful...
$(document).ready(function() {
$('#k').focus(function(event) {
$('#divAdministrators').addClass('focused')
});
$('#k').blur(function(event) {
$('#divAdministrators').removeClass('focused')
});
});
.cam-peoplepicker-userlookup { margin-right: 55em; height: 7em; min-width: 50%; overflow: hidden; border: 1px solid #99b0c1; padding: 2px 5px 2px 5px; background-color: white; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }
.focused { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
<textarea id="k"></textarea>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
I think it may not be possible until you are not using js.
You would have to re-structure your HTML to achieve this without Javascript.
.cam-peoplepicker-userlookup {
margin-right: 55em;
height: 7em;
min-width: 50%;
overflow: hidden;
border: 1px solid #99b0c1;
padding: 2px 5px 2px 5px;
background-color: white;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
}
.form-group {
position: relative;
}
#k {
position: absolute;
top: .5em;
left: .5em;
}
#divAdministrators {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#k:focus~#divAdministrators {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
#*Project Manager*#
<div class="form-group">
<textarea id="k"></textarea>
<div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
<span id="spanAdministrators"></span>
</div>
<div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>
I am trying to get a form styled with css on my webpage, but i cant seem to get the form to recognize the css.As you can see below I am simply trying to stlye the element below is the code. Any thoughts? I am sure the solution is cake, new programmer over here.. any and all help is appreciated!
CSS
form {
background: -webkit-gradient(linear, bottom, left 175px, from(#CCCCCC), to(#EEEEEE));
background: -moz-linear-gradient(bottom, #CCCCCC, #EEEEEE 175px);
margin: auto;
position: relative;
width: 550px;
height: 450px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-style: italic;
line-height: 24px;
font-weight: bold;
color: #09C;
text-decoration: none;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 10px;
border: 1px solid #999;
border: inset 1px solid #333;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input {
width: 375px;
display: block;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
textarea#feedback {
width: 375px;
height: 150px;
}
textarea.message {
display: block;
}
input.button {
width: 100px;
position: absolute;
right: 20px;
bottom: 20px;
background: #09C;
color: #fff;
font-family: Tahoma, Geneva, sans-serif;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1p solid #999;
}
input.button:hover {
background: #fff;
color: #09C;
}
textarea:focus, input:focus {
border: 1px solid #09C;
}
HTML
<form>
<div>
<h1>Contact Form :</h1>
<label>
<span>Your name</span><input id="name" type="text" name="name" />
</label>
<label>
<span>Email Address</span><input id="email" type="text" name="email" />
</label>
<label>
<span>Subject</span><input id="subject" type="text" name="subject" />
</label>
<label>
<span>Message</span><textarea id="feedback" name="feedback"></textarea>
<input type="button" value="Submit Form" />
</label>
</div>
</form>
I have a feeling I have my stacking contexts messed up, but I cannot get this working.
I have several divs, for which z-index is working correctly, however, one child is not cooperating.
My HTML looks something like this:
....
<div id="filters">
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="filter"></div>
<div class="set">
<img src="Cat.png">
<div class="drop">
<img src="Hammer.png">
<img src="Cat.png">
<img src="Bat.png">
</div>
</div>
</div>
....
My CSS looks something like this:
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
padding: 0px 0px;
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
z-index: 1;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
z-index: 4;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
position: relative;
z-index: 3;
}
.drop {
position: relative;
z-index: 2;
width: 20px;
padding: 8px 4px 2px 4px;
top: 2px;
left: -6px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
}
What I am trying to do is to get the .drop behind the .set, which is behind the filter but all of them are ontop of .filters. With my code, everything is displayed properly except that .drop is ontop of .set.
Sorry to say that this is not possible. A child element cannot have a lower z-index than the parent element.
More on that topic
//text code
body{
padding:0;
margin:0;
}
#filters {
width: 256px;
height: 32px;
text-align: center;
background: linear-gradient(#147380, #0c454d);
margin-bottom: 16px;
border: 1px solid #c8c998;
border-radius: 6px;
box-shadow: 0px 0px 0px 1px #504e20, inset 0px 0px 0px 1px #504e20;
position: relative;
}
.filter {
height: 22px;
width: 22px;
border-radius: 28px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 3px;
display: inline-block;
position: relative;
border:1px solid gold;
}
.set {
height: 22px;
width: 20px;
border-radius: 0px 28px 28px 0px;
border: 2px solid #7b7651;
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.75), inset 0px 3px 3px rgba(255, 255, 255, 0.25), inset 0px -3px 3px rgba(0, 0, 0, 0.25);
margin: 3px 0px;
margin-left: -19px;
padding: 0px 8px 0px 15px;
background: #e16006;
display: inline-block;
border:1px solid black;
}
.drop {
position: relative;
width: 20px;
padding: 8px 4px 2px 4px;
border-radius: 0px 0px 7px 7px;
border: 2px solid #7b7651;
border-top: 0px;
background: #d55801;
border:1px solid cyan;
margin-top:-138px;
position: absolute;
right:21px;
transition:all 0.5s linear;
z-index:-1;
}
#filters .set:hover .drop{
margin-top:0px;
transition:all 0.5s linear;
}