Develop Reference

Trying to change background gradient in css for flask application

I created a flask application using a template that I found online. I am not well-versed with html or css. After calling the application, I realized that the background of the web page has a red-to-blue gradient that I would like to change to a regular dark blue color. Could you please let me know where in my code I can do this. The code is pasted below. Thanks in advance.
I tried changing background-image to none and background to #e6e6e6 (which represents the blue that I want) in multiple places, but it still did not work
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #00008B; }
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
.btn-block { width: 100%; display:block; }
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
html { width: 100%; height:100%; overflow:scroll; }
body {
width: 100%;
height:100%;
font-family: 'Open Sans', sans-serif;
background-image: none;
background-color: #e6e6e6;
color: #fff;
font-size: 18px;
text-align:center;
letter-spacing:1.2px;
}
.login {
position: absolute;
top: 40%;
left: 50%;
margin: -150px 0 0 -150px;
width:400px;
height:450px;
}
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
input {
width: 100%;
margin-bottom: 15px;
background-image:none;
background: #e6e6e6;
border: none;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);
border-radius: 4px;
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
}
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }

You can try adding !important to override the background from the template. it would look something like this
background-image:none !important;
background-color: #e6e6e6 !important;

How do I put input fields into 2 columns?

I have a form which currently is all in one column, I would like it to be split into 2 columns.
I have tried adding div classes, but the form is still only one column, I do not want to do any changes to the current form itself. I would just like to be able to split it into 2 columns.
I would also not like the current CSS effects that I have on the fields to change..
$yellow:#f5ba1a;
$black:#000000;
$grey:#cccccc;
.form-style-1{
font-family: Verdana, Geneva, sans-serif;
font-size: 0.em;
width: 40em;
padding: 1em;
border: 1px solid #cbc9c9;
overflow:auto;
resize:both;
}
.form-style-1 fieldset{
border-radius:none;
background-color:#ebebeb;
padding:5px;
border:1px solid #cbc9c9;
width:450px;
margin:auto;
box-shadow: 1px 2px 5px rgba(0,0,0,.31);
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.31);
}
.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: block;
}
#transfer:checked ~ [data-conditional*="travel"] {
display: block;
}
input[type="text"]
{
display:block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 25px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
input[type="date"]
{
display:block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 25px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
textarea {
display:block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 25px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
select {
display:block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 35px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
input[type="time"]
{
display:block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 25px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
-moz-box-shadow: 1px 2px 5px rgba(0,0,0,.09);
box-shadow: 1px 2px 5px rgba(0,0,0,.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
h1 {
font-size: 32px;
font-weight: 300;
color: #4c4c4c;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
a.button {
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 25px 0px 20px;
margin: 10px 8px 20px 0px;
display: inline-block;
float: right;
text-decoration: none;
width: 50px; height: 27px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3a57af;
-webkit-box-shadow: 0 3px rgba(58,87,175,.75);
-moz-box-shadow: 0 3px rgba(58,87,175,.75);
box-shadow: 0 3px rgba(58,87,175,.75);
transition: all 0.1s linear 0s;
top: 0px;
position: relative;
}
a.button:hover {
top: 3px;
background-color:#2e458b;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
p {
color:black;
}
<div class="form-style-1">
<h1>Travel Registration Form</h1>
<form action="" method="POST">
<input name="orgid" type="hidden" value="00D8E000000DW9t" /> <input name="retURL" type="hidden" value="http://" />
<fieldset>
<h3>
Select Travel</h3>
<input class="form__input form__input--checkbox" data-input="00N8E000002AjRq" id="flight" type="checkbox" />
<label class="form__field form__field--checkbox" for="flight"> <span class="form__label">Flight</span>
</label>
<input class="form__input form__input--checkbox" id="hotel" type="checkbox" />
<label class="form__field form__field--checkbox" for="hotel"> <span class="form__label">Hotel</span> </label>
<input class="form__input form__input--checkbox" id="transfer" type="checkbox" />
<label class="form__field form__field--checkbox" for="transfer"> <span class="form__label">Transfer </span>
</label>
<!--Above is the checkboxes code -->
<p class="form__field form__field--text" data-conditional="flight hotel travel">
<span class="form__input">Traveler's Information </span></p>
<label class="form__field form__field--text" data-conditional="flight hotel travel" for="name"><span class="form__label">Traveler Name </span><input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" /> </label><br>
<label class="form__field form__field--text" data-conditional="flight hotel travel" for="email">Email<input class="form__input" id="email" maxlength="80" name="email" size="20" type="text" /></label><br />
<label class="form__field form__field--text" data-conditional="flight hotel travel" for="phone">Phone<input class="form__input" id="phone" maxlength="40" name="phone" size="20" type="text" /></label><br />
<label class="form__field form__field--text" data-conditional="flight hotel travel" for="subject">Subject<input class="form__input" id="subject" maxlength="80" name="subject" size="20" type="text" /></label><br />
<label class="form__field form__field--text" data-conditional="flight hotel travel" for="description">Description<textarea class="form__input" name="description"></textarea></label><br />

Made use of CSS grid to get the two columns.
$yellow: #f5ba1a;
$black: #000000;
$grey: #cccccc;
.form-style-1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 0em;
width: 40em;
padding: 1em;
border: 1px solid #cbc9c9;
overflow: auto;
resize: both;
}
.form-style-1 fieldset {
border-radius: none;
background-color: #ebebeb;
padding: 5px;
border: 1px solid #cbc9c9;
width: 450px;
margin: auto;
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31);
-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31);
-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.31);
}
.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: grid;
grid-template-columns: auto auto;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: grid;
grid-template-columns: auto auto;
}
#transfer:checked ~ [data-conditional*="travel"] {
display: grid;
grid-template-columns: auto auto;
}
input[type="text"] {
display: block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 25px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
input[type="date"] {
display: block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 25px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
textarea {
display: block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 25px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
select {
display: block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 35px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
input[type="time"] {
display: block;
width: 50%;
padding: 8px 10px 9px 35px;
height: 25px;
box-sizing: border-box;
outline: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: #fff;
-webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
-moz-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.09);
border: solid 1px #cbc9c9;
-webkit-border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
-moz-border-radius: 0px 4px 4px 0px/0px 0px 4px 4px;
border-radius: 0px 4px 4px 0px/5px 5px 4px 4px;
}
h1 {
font-size: 32px;
font-weight: 300;
color: #4c4c4c;
text-align: center;
padding-top: 10px;
margin-bottom: 10px;
}
a.button {
font-size: 14px;
font-weight: 600;
color: white;
padding: 6px 25px 0px 20px;
margin: 10px 8px 20px 0px;
display: inline-block;
float: right;
text-decoration: none;
width: 50px;
height: 27px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #3a57af;
-webkit-box-shadow: 0 3px rgba(58, 87, 175, 0.75);
-moz-box-shadow: 0 3px rgba(58, 87, 175, 0.75);
box-shadow: 0 3px rgba(58, 87, 175, 0.75);
transition: all 0.1s linear 0s;
top: 0px;
position: relative;
}
a.button:hover {
top: 3px;
background-color: #2e458b;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
p {
color: black;
}
<body>
<div class="form-style-1">
<h1>Travel Registration Form</h1>
<form action="" method="POST">
<input name="orgid" type="hidden" value="00D8E000000DW9t" />
<input name="retURL" type="hidden" value="http://" />
<fieldset>
<h3>
Select Travel
</h3>
<input
class="form__input form__input--checkbox"
data-input="00N8E000002AjRq"
id="flight"
type="checkbox"
/>
<label class="form__field form__field--checkbox" for="flight">
<span class="form__label">Flight</span>
</label>
<input
class="form__input form__input--checkbox"
id="hotel"
type="checkbox"
/>
<label class="form__field form__field--checkbox" for="hotel">
<span class="form__label">Hotel</span>
</label>
<input
class="form__input form__input--checkbox"
id="transfer"
type="checkbox"
/>
<label class="form__field form__field--checkbox" for="transfer">
<span class="form__label">Transfer </span>
</label>
<!--Above is the checkboxes code -->
<p
class="form__field form__field--text"
data-conditional="flight hotel travel"
>
<span class="form__input">Traveler's Information </span>
</p>
<div data-conditional="flight hotel travel">
<label class="form__field--text" for="name"
><span class="form__label">Traveler Name </span
><input
class="form__input"
id="name"
maxlength="80"
name="name"
size="20"
type="text"
/>
</label>
<label class="form__field--text" for="email"
>Email<input
class="form__input"
id="email"
maxlength="80"
name="email"
size="20"
type="text"
/></label>
<label class="form__field--text" for="phone"
>Phone<input
class="form__input"
id="phone"
maxlength="40"
name="phone"
size="20"
type="text"
/></label>
<label class="form__field--text" for="subject"
>Subject<input
class="form__input"
id="subject"
maxlength="80"
name="subject"
size="20"
type="text"
/></label>
<label class="form__field--text" for="description"
>Description<textarea
class="form__input"
name="description"
></textarea
></label>
</div>
</fieldset>
</form>
</div>
</body>
You could now decrease the width of inputs or increase the width of form-style-1 to achieve a more elegant design.

If I have understood correctly then try wrapping your labels and input fields in divs and then set those to inline blocks?
HTML:
<div class="form-input">
<label class="form__field form__field--text" data-conditional="flight hotel travel" for="name">
<span class="form__label">Traveler Name</span>
<input class="form__input" id="name" maxlength="80" name="name" size="20" type="text" />
</label>
</div>
CSS:
.form-input {
display: inline-block;
}

Stripe Element Quickstart example not rendering correctly

I am just getting started with Stripe's Element Quickstart. I have the following fiddle. As you can see, it looks nothing like the example. I've even loaded their https://js.stripe.com/v3/ file but have no idea what I'm missing:
<form action="/charge" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element">
<!-- A Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors. -->
<div id="card-errors" role="alert"></div>
</div>
<button>Submit Payment</button>
</form>

The page that the example is on here defines styles for the form, button, label, etc. You can find this css if you open up the console on their example site and search for this style tag <style media="screen"> embedded in the html. Add the css to your fiddle and it will look like their example.
body, html {
height: 100%;
background-color: #f7f8f9;
color: #6b7c93;
}
*, label {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 16px;
font-variant: normal;
padding: 0;
margin: 0;
-webkit-font-smoothing: antialiased;
}
button {
border: none;
border-radius: 4px;
outline: none;
text-decoration: none;
color: #fff;
background: #32325d;
white-space: nowrap;
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
border-radius: 4px;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.025em;
text-decoration: none;
-webkit-transition: all 150ms ease;
transition: all 150ms ease;
float: left;
margin-left: 12px;
margin-top: 28px;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0 7px 14px rgba(50, 50, 93, .10), 0 3px 6px rgba(0, 0, 0, .08);
background-color: #43458b;
}
form {
padding: 30px;
height: 120px;
}
label {
font-weight: 500;
font-size: 14px;
display: block;
margin-bottom: 8px;
}
#card-errors {
height: 20px;
padding: 4px 0;
color: #fa755a;
}
.form-row {
width: 70%;
float: left;
}
.token {
color: #32325d;
font-family: 'Source Code Pro', monospace;
font-weight: 500;
}
.wrapper {
width: 670px;
margin: 0 auto;
height: 100%;
}
#stripe-token-handler {
position: absolute;
top: 0;
left: 25%;
right: 25%;
padding: 20px 30px;
border-radius: 0 0 4px 4px;
box-sizing: border-box;
box-shadow: 0 50px 100px rgba(50, 50, 93, 0.1),
0 15px 35px rgba(50, 50, 93, 0.15),
0 5px 15px rgba(0, 0, 0, 0.1);
-webkit-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
transform: translateY(0);
opacity: 1;
background-color: white;
}
#stripe-token-handler.is-hidden {
opacity: 0;
transform: translateY(-80px);
}
/**
* The CSS shown here will not be introduced in the Quickstart guide, but shows
* how you can use CSS to style your Element's container.
*/
.StripeElement {
background-color: white;
height: 40px;
padding: 10px 12px;
border-radius: 4px;
border: 1px solid transparent;
box-shadow: 0 1px 3px 0 #e6ebf1;
-webkit-transition: box-shadow 150ms ease;
transition: box-shadow 150ms ease;
}
.StripeElement--focus {
box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
border-color: #fa755a;
}
.StripeElement--webkit-autofill {
background-color: #fefde5 !important;
}

"display: none" smooth animation

in the jsfiddle you will find a header
with a search icon which when pressed, will make a search bar appear under the header. but the problem is that it appears instantly. I want the header to smoothly expand and the search bar to fade in. I tried but couldn't get it to work.
jsfiddle: https://jsfiddle.net/HussamAlhassan/zwg0drne/15/
here's the code:html:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/brands.css" integrity="sha384-IiIL1/ODJBRTrDTFk/pW8j0DUI5/z9m1KYsTm/RjZTNV8RHLGZXkUDwgRRbbQ+Jh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/solid.css" integrity="sha384-v2Tw72dyUXeU3y4aM2Y0tBJQkGfplr39mxZqlTBDUZAb9BGoC40+rdFCG0m10lXk" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/fontawesome.css" integrity="sha384-q3jl8XQu1OpdLgGFvNRnPdj5VIlCvgsDQTQB6owSOHWlAurxul7f+JpUOVdAiJ5P" crossorigin="anonymous">
</head>
<div style="position: fixed; width: 100%; box-shadow: 0px 1px grey; transition: .4s ease-in-out;" id="headershell">
<div id="header">
<div id="searchicondiv">
<i class="fas fa-search searchicon"></i>
</div>
<div id="namediv">
<h1 id="name">Header</h1>
</div>
<div id="logindiv">
<a href="#">
<h2 id="login">Login</h2>
</a>
</div>
</div>
<div id="hiddensearch" class="Hidden" style=" background-color: black;">
<div style="width: 100%;">
<input id="search" placeholder="Search..">
</div>
</div>
</div>
css:
div#header {
width: 100%;
background-color: rgba(0, 0, 0, 1);
display: flex;
z-index: 1000000;
-webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
transition: .3s ease-in-out;
}
div#header #name {
color: white;
font-family: orbitron;
text-align: center;
font-size: 1.5em;
margin-left: 5%;
}
div#header #login {
color: white;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
text-align: center;
font-size: 1em;
transition: .2s ease-in-out;
padding: 0px;
}
div#headershell .searchicon {
color: white;
margin: auto;
margin-left: 50%;
transition: .2s ease-in-out;
}
div#headershell .searchicon:hover,
#login:hover {
cursor: pointer;
opacity: 0.5;
}
div#namediv {
float: left;
width: 33.4%;
}
div#searchicondiv {
width: 33.3%;
margin: auto;
transition: .2s ease-in-out;
}
div#logindiv {
width: 33.3%;
float: left;
margin: auto;
}
div#hiddensearch {
z-index: 100;
transition: 0.4s ease-in-out;
padding-bottom: 1em;
height: inherit;
background-color: rgba(0, 0, 0, 1);
transition: .3s ease-in-out;
}
div#hiddensearch #search {
padding: .4em;
width: 80%;
margin-left: 10%;
margin-right: 10%;
border-radius: 5px;
margin-top: -5%;
color: white;
background-color: rgba(0, 0, 0, 1);
border: 2px white solid;
transition: 0.3s ease-in-out;
}
div#hiddensearch #search:focus {
text-decoration: none;
color: black;
background-color: white;
border: 2px black solid;
outline-width: 0px;
}
.headernotHidden {
-webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
transition: .3s ease-in-out;
}
.notHidden {
-webkit-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 3px 10px 1px rgba(0, 0, 0, 0.75);
transition: .3s ease-in-out;
opacity: 1;
display: flex;
}
.Hidden {
display: none;
transition: .3s ease-in-out;
}
js:
$(document).ready(function() {
// jQuery methods go here...
$(".searchicon").click(function hidesearch() {
if ($("#hiddensearch").hasClass("Hidden")) {
$("#hiddensearch").removeClass("Hidden");
$("#hiddensearch").addClass("notHidden");
$(".searchicon").removeClass("fa-search");
$(".searchicon").addClass("fa-times");
$("#headershell").addClass("headershellHidden");
} else {
$("#hiddensearch").removeClass("notHidden");
$("#hiddensearch").addClass("Hidden");
$(".searchicon").removeClass("fa-times");
$(".searchicon").addClass("fa-search");
$("#headershell").removeClass("headershellHidden");
}
})
});
edit: solutions that consist of setting the opacity to 0 wont work because you can still click on the input which isnt what i want

Instead of display: none, use opacity: 0; on the CSS for .Hidden
https://jsfiddle.net/k1yg95gk/2/

I can see you are using jQuery.
Instead of using display: none; you can use the jQuery .hide() and .show().
You can use it this way :
$(selector).hide(speed, callback);
$(selector).show(speed, callback);
or even simpler, with the .toggle(), like this :
$(selector).toggle(speed, callback);
All documentations are here :
For hide();
For show();
For toggle();
You'll just have to handle the speed as you wish.
EDIT
Edited JSFiddle :
https://jsfiddle.net/zwg0drne/30/
If the animation is not okay for you, you can use toggleClass(); with the animation you want in this CSS class (on the display, the height, the width.. whatever you want, with a transition speed).
Documentation here :
toggleClass() documentation

You can use any of the jQuery methods for animation listed below.
.slideUp()
.slideDown()
.fadeIn()
.fadeOut()
.slideToggle()
Here you go. I have used slideToggle() method in following fiddle.
https://jsfiddle.net/zwg0drne/27/
You were over-engineering and writing too many lines to achieve a simple thing. Please note that I have also made changes in CSS.
Edit: updated fiddle link to toggle search icon with close icon as well.

Trying to implement a JQuery script (inexperimented)

I'm trying to implement a JQuery script to a php file, but so far it didn't work.
I'm very new to web programming (a couple weeks old) and this is my first real use of JQuery.
Here is part of what i want to do with this :
I'm trying to get the opacity of a span element gradually go from 1 to 0 for a login menu. The exact same thing as here.
And this is what i did : /** nevermind, not enough reputation for images **/
I have a some problems with this menu but my priority is to get that javascript to work. It is supposed to reduce the opacity to 0 of the icons in front of "username" and "password" (i'm just trying to have it work on password for now) but it doesn't.
This login form is part of my header.php and going to be all over the website.
Here are my codes (javascript / part of the css / part of my header.php) :
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
And so far when i load my page nothing happens regarding theses icons, while they are supposed to vanish the same way as in the exemple i linked (and i'm guessing the submit button wouldn't either so i didn't bother going farther).
So what did i miss here ?
Thank you ! Any help is appreciated, hope there is enough information and if not i will provide more.
-Apatik
edit1 : my whole script.js looks like this :
$(document).ready(function(){
$( "#mdp" ).focusin(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
});
$( "#mdp" ).focusout(function() {
$( this ).find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
})

You're attaching an action to an element with the class login:
$(".login").submit(function(){
....
But nothing in your html has that class
Also, based on your comment where you said it works here but not in your own website, you may well have forgotten to include jQuery library - its done automatically here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit: Your code is in an external file called script.js which is fine, but that code executes immediately. It needs to execute once the DOM has loaded, therefore change script.js to look like
$(function(){
// existing code here
});
That is a shortened version of
$(document).ready(function(){
// existing code here
});
Either way will ensure your code only executes after the DOM has loaded.

You have to put focusin/focusout events on inputs not on the parent.
$( "#mdp input" ).focusin(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"0"}, 200);
}).focusout(function() {
$("#mdp").find( ".mdp_icon" ).animate({"opacity":"1"}, 300);
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
.......
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>

you use $( "#mdp" ).focusin(function(){}); on the id #mdp but your input field has the id #txt_mdp.
Try this
$( "#txt_mdp" ).focusin(function(){ ... });
instead.

It is quite easy to solve your problem, and I suggest two ways:
Javascript
I have simplified your JS to make it work (if I deleted anything of other purposes, well, put that back). I added a class to the group that contains the icon and the input, and then bind on focus and blur events, like this:
$(".fadeicon input").focus(function() {
$(this).next().animate({opacity: 0})
}).blur(function() {
$(this).next().animate({opacity: 1})
});
I have used the standard focus and blur events on your input elements, and then select the next element to fade in or out. Your icons' HTML now look like this:
<div class="fadeicon">
<input type="text" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
The reason I added a class to the group is so you can easily select where you want this to take effect.
CSS
However, there is an even better way that rquires no javascript! It is a just css solution and it is two lines long:
.fadeicon input + span { opacity: 1; transition: opacity 400ms; }
.fadeicon input:focus + span { opacity: 0; }
Again, I used the fadeicon class to make it easily targeted, but as long as you can target them you can do this with CSS!
Examples
Here a jquery snippet:
$( ".fadeicon input" ).focus(function() {
$( this ).next().animate({opacity: 0})
}).blur(function() {
$( this ).next().animate({opacity: 1})
});
$(".login").submit(function(){
$(this).find(".submit i").removeAttr('class').addClass("fa fa-check").css({"color":"#fff"});
$(".submit").css({"background":"#2ecc71", "border-color":"#2ecc71"});
$(".feedback").show().animate({"opacity":"1", "bottom":"-80px"}, 400);
$("input").css({"border-color":"#2ecc71"});
return false;
});
input[type="submit"] {
width: 45px;
height: 45px;
display: block;
margin: 0 auto -15px auto;
background: #fff;
border-radius: 100%;
border: 1px solid #a6ba89;
color: #FFF;
font-size: 24px;
cursor: pointer;
box-shadow: 0px 0px 0px 7px
}
input#txt_identifiant, input#txt_mdp {
border-radius: 3px;
font-size: 14px;
height: 28px;
line-height: 28px;
width: 200px;
padding: 0 8px 0 30px ;
display: block;
border: 1px solid #DDDDDD;
transition: 0.3s ease-out;
}
input#txt_identifiant, input#txt_mdp {
:-webkit-transition: 0.3s ease-out;
:-moz-transition: 0.3s ease-out;
}
#txt_identifiant:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
#txt_mdp:focus {
padding: 0 8px 0 10px ;
border-color: #a6ba89;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6)
}
.error {
display: block;
color: #C85305;
font-size: 12px;
min-height: 12px;
}
.placeholder {color: #aaa}
::-webkit-input-placeholder {color: #aaa}
:-moz-placeholder {color: #aaa}
#identifiant {
text-align: center;
padding: 15px 15px 0 15px;
}
.identifiant_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 23px;
top: 18px;
font-size: 20px;
}
#mdp {
text-align: center;
padding: 15px 15px 0 15px;
}
.mdp_icon {
position: absolute;
display: block;
color: darken(#EDEDED, 10%);
left: 25px;
top: 65px;
font-size: 20px;
}
<!-- header -->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
</head>
<div class="bubble">
<form method="post" action="login.php">
<div id="identifiant" class="fadeicon">
<input type="text" name="txt_identifiant" id="txt_identifiant" placeholder="username" required="" value="" />
<span class="identifiant_icon"><i class="fa fa-user"></i></span>
</div>
<div id="mdp" class="fadeicon">
<input type="password" name="txt_mdp" id="txt_mdp" placeholder="password" required="" />
<span class="mdp_icon"><i class="fa fa-lock"></i></span>
</div>
<div id="maintenir">
<input type="checkbox" name="chk_maintenir" id="chk_maintenir">
<label for="chk_maintenir"><span>Stay Connected</span></label>
</div>
<div id="soumettre">
<input type="submit" name="sub_login" id="sub_login" value="" style="" />
</div>
</form>
</div>
Heres the CSS snippet (example):
.fadeicon input + span {
-webkit-transition: opacity 500ms;
transition: opacity 500ms;
opacity: 1;
}
.fadeicon input:focus + span { opacity: 0;}
<div class="fadeicon">
<input type="text">
<span>Fade me out</span>
</div>