I'm doing a search box slide. What I need is that when you click on the magnifying glass, move the slide the "Castilian", text and that it is not fixed text and sarch see box below. It's possible? this is the best I could do ...
My code
try this css. This worked.
#wrap {
margin: 39px 60px;
display: inline-block;
position: relative;
/*float: right;*/
padding: 0;
position: relative;
}
input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-right: 60px;
width: 0px;
position: relative;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[type="text"]:focus form {
width: 700px;
}
input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
/*float: right;*/
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
input[type="submit"]:hover {
opacity: 0.8;
}
Related
I have a customized button/link element that transforms the said element to look like this:
Problem I'm having is that when the button is focused using keyboard the outline is not transformed along the borders of the element. I've also tried using box-shadow, with same results. Is there a proper way to transform outline, like I did with the element itself?
.button {
font-family: $brand-font;
font-weight: 900;
transition: color $transition-duration ease-out;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
text-align: center;
max-width: 320px;
min-width: 200px;
height: 40px;
line-height: 40px;
position: relative;
border: none !important;
font-size: 1.4rem;
z-index: 0;
padding: 0 1.8rem;
background-color: transparent;
color: $primary-blue;
cursor: pointer;
&:visited {
border: none !important;
}
&.skewOnHover {
color: $secondary-blue;
}
& > svg {
vertical-align: middle;
}
&:focus {
outline: 2px solid $primary-blue;
// box-shadow: 0 0 0 2px $primary-blue;
}
&::before {
content: ""; display: block;
display: block;
width: 100%; height: 100%;
top: -2px; left: -2px;
transition-property: border, background-color, transform;
transition-duration: $transition-duration;
transition-timing-function: ease-out;
position: absolute;
z-index: -1;
// regular (cyan background, blue text)
background-color: $secondary-blue;
border: 2px solid $secondary-blue;
transform: skew(-22.5deg);
}
&.skewOnHover {
&::before {
background-color: transparent;
transform: skew(22.5deg);
}
}
Apply the outline to skewed element:
&:focus:before {
outline: 2px solid red;
}
and reset the outline of button:
.button:focus {
outline: none;
}
.button {
font-weight: 900;
transition: color 0.3s ease-out;
-webkit-appearance: none;
-moz-appearance: none;
display: inline-block;
text-align: center;
max-width: 320px;
min-width: 200px;
height: 40px;
line-height: 40px;
position: relative;
border: none !important;
font-size: 1.4rem;
z-index: 0;
padding: 0 1.8rem;
background-color: transparent;
color: blue;
cursor: pointer;
}
.button:visited {
border: none !important;
}
.button.skewOnHover {
color: dodgerblue;
}
.button>svg {
vertical-align: middle;
}
.button:focus {
outline: none;
}
.button:focus:before {
outline: 2px solid red;
}
.button::before {
content: "";
display: block;
display: block;
width: 100%;
height: 100%;
top: -2px;
left: -2px;
transition-property: border, background-color, transform;
transition-duration: 0.3s;
transition-timing-function: ease-out;
position: absolute;
z-index: -1;
background-color: dodgerblue;
border: 2px solid dodgerblue;
transform: skew(-22.5deg);
}
.button.skewOnHover::before {
background-color: transparent;
transform: skew(22.5deg);
}
<button class="button">button</button>
I want to make a CSS animation to open a transparent background from the center to the border (right and left) and leave the border red with text red and without any background.
Is it possible to do? I think I made a mistake with the class "bottone" but I don't know where!
The button needs to be like this, but with the colors inverted:
.bottone {
background: red;
box-sizing: border-box;
appearance: none;
color: #fff;
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 100%;
background: red;
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:hover {
color: red;
}
.bottone:hover:after {
width: 110%;
}
<a class="bottone">example</a>
Here's another attempt:
.bottone {
background: transparent;
box-sizing: border-box;
appearance: none;
color: red;
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 0%;
height: 100%;
background: red;
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:hover {
color: #fff;
}
.bottone:hover:after {
width: 110%;
}
<a class="bottone">example</a>
Instead of "opening a transparent background", consider "moving two elements to reveal a transparent background". One idea is to use two pseudo-elements, :before and :after, that recede to opposite sides of the box.
In my example, one is left:0 and the other is right:0.
Their widths both transition from 50% to 0.
body {
background-color: lightgreen;
}
.bottone {
background: transparent;
box-sizing: border-box;
appearance: none;
color: white;
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:hover {
color: red;
}
.bottone:before,
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
width: 50%;
height: 100%;
background: red;
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:before {
left: 0;
}
.bottone:after {
right: 0;
}
.bottone:hover:before,
.bottone:hover:after {
width: 0;
}
<a class="bottone">example</a>
Color need to be swapped.
pseudo size needs also to be set and reset on hover.
CSS commented
.bottone {
background: transparent;
box-sizing: border-box;
appearance: none;
color: white;/* inverted*/
border: 2px solid red;
cursor: pointer;
display: inline-block;
position: relative;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 150ms ease-in-out;
}
.bottone:after {
content: '';
position: absolute;
display: block;
top: 0;
left: 50%;
width: 0%;
height: 100%;
width: 110%;/* moved here */
background: red;
transform: translateX(-50%);
z-index: -1;
transition: width 150ms ease-in-out;
}
.bottone:hover {
color: red;/* inverted */
}
.bottone:hover:after {
width: 0;/* reset here */
}
<a class="bottone">example</a>
I want to show panel1(div) when I hover button1, show panel2(div) when I hover button2. But the problem now is that the panel won't align top with the button. I've tried "Vertical-Align, Align-items", still couldn't figure out how to do it, please help!
But it always display like this:
Here is my code
HTML:
<div class="Nav">
<span id='Span_Nav'>
<button class="Btn_Nav" id="Btn_Nav_Equipment" >
<div class="Panel_Nav" id='Panel_Equipment'></div>
<span>
<label class="Lb_Nav">Equipment</label>
</span>
</button>
<button class="Btn_Nav" id="Btn_Nav_Report">
<div class="Panel_Nav" id='Panel_Report' ></div>
<span>
<label class="Lb_Nav">Report</label>
</span>
</button>
</span>
</div>
CSS:
.Btn_Nav{
width: 100%;
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
border: 0;
height: 6vh;
}
.Btn_Nav > span{
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
color: white;
background: transparent;
background-color: transparent;
display: inline-block;
}
#Span_Nav{
position: absolute;
width: 100%;
top:10vh;
}
button > div.Panel_Nav {
margin-top: 0;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
vertical-align: top;
visibility: hidden;
opacity: 0;
left: 100%;
width: 500%;
height: 6vh;
background: #0f5787;
border: 2px solid;
outline: none;
}
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
}
Check your answer here https://jsfiddle.net/g3yL9cro/1/
.Btn_Nav{
position: relative;
}
button:hover > div.Panel_Nav {
top: 0px;
}
Update 2: Based on OP's fiddle
.Btn_Nav > span{
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
background: transparent;
background-color: transparent;
display: inline-block;
}
#Span_Nav{
position: absolute;
width: 100px;
top:10px;
}
button > div.Panel_Nav {
margin-top: -2px;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
visibility: hidden;
opacity: 0;
left: 100%;
width: 500%;
height: 20px;
background: #0f5787;
outline: none;
}
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
}
Update 1:
CSS code
body {
padding: 5px;
background: blue;
}
.Btn_Nav{
width: 10%;
background: #eee;
background-color: #eee;
display: block;
margin: 20px;
border: 0;
height: 100%;
}
.Btn_Nav > span > label.Lb_Nav{
color: #333;
background: transparent;
background-color: transparent;
display: block;
}
#Span_Nav{
position: absolute;
width: 100%;
}
button > div.Panel_Nav {
margin-top: -2px;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
vertical-align: top;
display: none;
opacity: 0;
left: 12%;
width: 50%;
height: 18px;
background: #0f5787;
}
button:hover > div.Panel_Nav {
display: block;
opacity: 1;
}
Adding a top value fixes the issue.
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
top: 0;
}
I have an issue with my dropdown menu. I have a table and at the end of each row i have a dropdown menu like that :
When i hover the menu on every browser i got this :
Except on IE11 :
Here is my CSS :
#dropdown_classe {
margin: 10px 0 20px 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#dropdown_classe .wrapper {
display: inline-block;
width: 180px;
margin: 0 10px 0 0;
height: 20px;
position: relative;
}
#dropdown_classe .parent {
height: 100%;
width: 100%;
display: block;
cursor: pointer;
line-height: 30px;
height: 30px;
border-radius: 5px;
background: #F9F9F9;
border: 1px solid #AAA;
border-bottom: 1px solid #777;
color: #282D31;
font-weight: bold;
font-size: 13px;
z-index: 2;
position: relative;
-webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
-webkit-transition-delay: .8s;
text-align: center;
}
#dropdown_classe .parent:hover,
#dropdown_classe .content:hover ~ .parent {
background: #fff;
-webkit-transition-delay: 0s, 0s, 0s;
}
#dropdown_classe .content:hover ~ .parent {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
z-index: 0;
}
#dropdown_classe .content {
position: absolute;
top: 0;
display: block;
z-index: 1;
height: 0;
width: 180px;
padding-top: 30px;
-webkit-transition: height .3s ease;
-webkit-transition-delay: .2s;
border: 1px solid #777;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
#dropdown_classe .wrapper:hover .content {
height: 253px;
z-index: 3;
-webkit-transition-delay: 0s;
}
#dropdown_classe .content:hover {
height: 253px;
z-index: 3;
-webkit-transition-delay: 0s;
}
#dropdown_classe .content ul {
background: #fff;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#dropdown_classe .content ul a {
text-decoration: none;
}
#dropdown_classe .content li:hover {
background: #eee;
color: #333;
}
#dropdown_classe .content li {
list-style: none;
text-align: left;
color: #888;
font-size: 13px;
line-height: 30px;
height: 30px;
padding-left: 10px;
border-top: 1px solid #ccc;
}
#dropdown_classe .content li:last-of-type {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
If you have any advice please let me know
Ctbs1
I fixed this issue with this :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
i'm using the css3 search box code below and i want to know how to change the expanding direction of the search box from left to right
wai
#import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700);
#import url(https://raw.github.com/FortAwesome/Font-Awesome/master/docs/assets/css/font-awesome.min.css);
body {
background: #DDD;
font-size: 15px;
}
#wrap {
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
position: relative;
}
input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-right: 60px;
width: 0px;
position: absolute;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
input[type="submit"]:hover {
opacity: 0.8;
}
<div id="wrap">
<form action="" autocomplete="on">
<input id="search" name="search" type="text" placeholder="What're we looking for ?"><input id="search_submit" value="Rechercher" type="submit">
</form>
</div>
Everything seems to work fine except i need it to slide to the right direction
body {
background: #DDD;
font-size: 15px;
}
#wrap {
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: left;
padding: 0;
position: relative;
}
input[type="text"] {
height: 60px;
font-size: 55px;
display: inline-block;
font-family: "Lato";
font-weight: 100;
border: none;
outline: none;
color: #555;
padding: 3px;
padding-left: 60px;
width: 0px;
position: absolute;
top: 0;
left: 0;
background: none;
z-index: 3;
transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
cursor: pointer;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
width: 700px;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
float: left;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
input[type="submit"]:hover {
opacity: 0.8;
}
<div id="wrap">
<form action="" autocomplete="on">
<input id="search" name="search" type="text" placeholder="What're we looking for ?"><input id="search_submit" value="Rechercher" type="submit">
</form>
</div>
like this
body {
background: #DDD;
font-size: 15px;
}
#wrap {
margin: 50px 100px;
display: inline-block;
position: relative;
height: 60px;
float: right;
padding: 0;
position: relative;
}
input[type="text"] {
height: 60px;
font-size: 30px;
display: block;
font-family: "Lato";
font-weight: 200;
outline: none;
border:none;
color: black;
padding-right: 400px;
width: 100%;
position: absolute;
float: left;
top: 0;
right: 0;
background: none;
z-index: 3;
transition: all .4s ;
cursor: pointer;
opacity:0;
}
input[type="text"]:focus:hover {
border-bottom: 1px solid #BBB;
}
input[type="text"]:focus {
padding-right: 0px;
opacity:1;
border:normal;
z-index: 1;
border-bottom: 1px solid #BBB;
cursor: text;
}
input[type="submit"] {
height: 67px;
width: 63px;
display: inline-block;
color:red;
float: right;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADNQTFRFU1NT9fX1lJSUXl5e1dXVfn5+c3Nz6urqv7+/tLS0iYmJqampn5+fysrK39/faWlp////Vi4ZywAAABF0Uk5T/////////////////////wAlrZliAAABLklEQVR42rSWWRbDIAhFHeOUtN3/ags1zaA4cHrKZ8JFRHwoXkwTvwGP1Qo0bYObAPwiLmbNAHBWFBZlD9j0JxflDViIObNHG/Do8PRHTJk0TezAhv7qloK0JJEBh+F8+U/hopIELOWfiZUCDOZD1RADOQKA75oq4cvVkcT+OdHnqqpQCITWAjnWVgGQUWz12lJuGwGoaWgBKzRVBcCypgUkOAoWgBX/L0CmxN40u6xwcIJ1cOzWYDffp3axsQOyvdkXiH9FKRFwPRHYZUaXMgPLeiW7QhbDRciyLXJaKheCuLbiVoqx1DVRyH26yb0hsuoOFEPsoz+BVE0MRlZNjGZcRQyHYkmMp2hBTIzdkzCTc/pLqOnBrk7/yZdAOq/q5NPBH1f7x7fGP4C3AAMAQrhzX9zhcGsAAAAASUVORK5CYII=) center center no-repeat;
text-indent: -10000px;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 2;
cursor: pointer;
opacity: 0.4;
cursor: pointer;
transition: opacity .4s ease;
}
input[type="submit"]:hover {
opacity: 0.8;
}
form {
width: 460px;
overflow:hidden;
}
<div id="wrap">
<form action="" autocomplete="on" onclick='return false'>
<input id="search" name="search" type="text" placeholder="What're we looking for ?" ><input id="search_submit" value="Rechercher" type="submit">
</form>
</div>