const forms = document.querySelector(".forms"),
pwShowHide = document.querySelectorAll(".eye-icon"),
links = document.querySelectorAll(".link");
pwShowHide.forEach(eyeIcon => {eyeIcon.addEventListener("click",() =>
{let pwFields = eyeIcon.parentElement.parentElement.querySelectorAll(".password");
pwFields.forEach(password => {
if(password.type === "password"){
password.type = "text";
eyeIcon.classList.replace("bx-hide","bx-show");
return;
}
password.type = "password";
eyeIcon.classList.replace("bx-show","bx-hide");
})
})
})
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.container{
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.form{
position: absolute;
max-width: 430px;
width: 100%;
padding: 30px;
}
.form.signup{
opacity: 0;
pointer-events: none;
}
header{
font-size: 28px;
font-weight: 600;
color: rgb(0, 0, 0);
text-align: center;
}
form{
margin-top: 30px;
}
form a{
color:#2b2b2b;
text-decoration: none;
}
form a:hover{
text-decoration: underline;
}
form .field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 70px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
.form-link{
text-align: center;
margin-top: 10px;
}
.form-link span,
.form-link a{
font-size: 14px;
font-weight: 400;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page Title -->
<title>Login - LNEM</title>
<!-- CSS -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Icon CSS -->
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
<section class="container forms">
<div class="form-content">
<header>Login</header>
<form action="#">
<div class="field input-field">
<!-- Email Address -->
<input type="text" class="login-input" name="email" placeholder="Email Address">
</div>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
<div class="form-link">
Forgot Password?
</div>
<div class="field button-field">
<button>Sign In</button>
</div>
<div class="form-link">
<span>Don't have an account? Create Account</span>
</div>
</form>
</div>
</section>
<!-- Javascript -->
<script src="js/script.js"></script>
</body>
</html>
Im relatively new to CSS coding and whilst creating a login/register form for my coursework i noticed that within the password input field, the characters are appearing underneath the show/hide icon as shown below
is there any way to fix this?
I have visited a couple threads on this site and have found half the problem where padding was added, it has solved half the problem since it stops the vertical line ("|" <-- this thing) from going over the icon but once I show the password some characters still appear underneath the icon
So it seems to work for me when I change padding-right, but it's also possible that some css directives weren't applied because some html might have been missing.
/* Font */
#import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght#300;400;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito Sans', sans-serif;
}
.field{
height: 50px;
width: 340px;
margin-top: 20px;
position: relative;
}
.field input,
.field button{
height: 100%;
width: 100%;
border: none;
font-size: 16px;
font-weight: 400;
}
.field button{
color: white;
background-color: black;
cursor: pointer;
}
.field input{
outline: none;
padding: 0 15px;
border: 1px solid #cacaca;
/* Added code */
padding:4px 40px 4px 10px;
box-sizing: border-box;
}
.eye-icon{
position: absolute;
font-size: 18px;
color: #8b8b8b;
top: 50%;
right: 10px;
transform: translateY(-50%);
cursor: pointer;
padding: 5px;
background-color: white;
}
<link href='https://unpkg.com/boxicons#2.1.4/css/boxicons.min.css' rel='stylesheet'>
<div class="field input-field">
<input type="password" class="password" name="password" placeholder="Password">
<i class='bx bx-hide eye-icon'></i>
</div>
Related
I use https://boxicons.com/ to display the 3 icones. I share you here the code.
Except that, I would like to download the icons to keep them in a folder.
Here is the result with uploaded images:
The code is here
I have two problems:
The white color is gone and it is replaced with black.
There is a horizontal line below the image that has disappeared
Do you know how I could get the same result as in the first illustration?
I just changed this
<span class="form__login-text">Our partners</span>
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
In this
<span class="form__login-text">Our partners</span>
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
Thanks
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
}
.l-form {
position: relative;
height: 100vh;
overflow: hidden;
}
.shape1,
.shape2 {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
}
.shape1 {
top: -7rem;
left: -3.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
}
.shape2 {
bottom: -6rem;
right: -5.5rem;
background: linear-gradient(180deg, #239CD3 0%, rgba(196, 196, 196, 0) 100%);
transform: rotate(180deg);
}
.form {
height: 100vh;
display: grid;
justify-content: center;
align-items: center;
padding: 0 1rem;
}
.form__content {
width: 290px;
}
.form__img {
display: none;
}
.form__title {
font-size: 2rem;
font-weight: 500;
margin-bottom: 2rem;
color: #239CD3;
}
.form__div {
position: relative;
display: grid;
grid-template-columns: 7% 93%;
margin-bottom: 1rem;
padding: 0.25rem 0;
border-bottom: 1px solid #8590AD;
}
.form__div.focus {
border-bottom: 1px solid #8590AD;
}
.form__div.focus .form__icon {
color: red;
}
.form__div.focus .form__label {
top: -1.5rem;
font-size: 0.875rem;
color: red;
}
.form__div-one {
margin-bottom: 3rem;
}
.form__icon {
font-size: 1.5rem;
color: #8590AD;
transition: 0.3s;
}
.form__label {
display: block;
position: absolute;
left: 0.75rem;
top: 0.25rem;
font-size: 0.938rem;
transition: 0.3s;
}
.form__div-input {
position: relative;
}
.form__input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
outline: none;
background: none;
padding: 0.5rem 0.75rem;
font-size: 1.2rem;
color: #8590AD;
transition: 0.3s;
}
.form__button {
width: 100%;
padding: 1rem;
font-size: 0.938rem;
outline: none;
border: none;
margin-bottom: 3rem;
background-color: #239CD3;
color: #fff;
border-radius: 0.5rem;
cursor: pointer;
transition: 0.3s;
}
.form__button:hover {
box-shadow: 0px 15px 36px rgba(0, 0, 0, 0.15);
}
.form__login {
text-align: center;
}
.form__login-text {
display: block;
font-size: 0.938rem;
margin-bottom: 1rem;
color: #239CD3;
}
.form__login-icon {
display: inline-flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
margin-right: 1rem;
padding: 0.5rem;
background-color: #8590AD;
color: #fff;
font-size: 1.25rem;
border-radius: 50%;
}
.form__login-icon:hover {
background-color: #239CD3;
}
/*===== MEDIA QUERIS =====*/
#media screen and (min-width: 968px) {
.shape1 {
width: 400px;
height: 400px;
top: -11rem;
left: -6.5rem;
}
.shape2 {
width: 300px;
height: 300px;
right: -6.5rem;
}
.form {
grid-template-columns: 1.5fr 1fr;
padding: 0 2rem;
}
.form__content {
width: 320px;
}
.form__img {
display: block;
width: 700px;
justify-self: center;
}
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://unpkg.com/boxicons#2.0.7/css/boxicons.min.css" rel="stylesheet" />
<link href='https://cdn.jsdelivr.net/npm/boxicons#2.0.5/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="l-form">
<div class="shape1"></div>
<div class="shape2"></div>
<div class="form">
<img src="https://zupimages.net/up/22/33/al0n.png" alt="image" class="form__img" style="width: 70%">
<form class="form__content">
<h1 class="form__title">Login</h1>
<div class="form__div form__div-one">
<div class="form__icon">
<i class='bx bx-user-circle'></i>
</div>
<div class="form__div-input">
<label for="user" class="form__label"></label>
<input type="text" class="form__input" name="user" [(ngModel)]="loginForm.user" placeholder='Username'>
</div>
</div>
<input type="submit" class="form__button" value='Login'>
<div class="form__login">
<span class="form__login-text">Our partners</span>
<!--
<i class='bx bx-book-content'></i>
<i class='bx bx-building-house'></i>
<i class='bx bx-wallet-alt'></i>
-->
<img src="https://zupimages.net/up/22/33/qad0.png" alt="image">
<img src="https://zupimages.net/up/22/33/8mhc.png" alt="image">
<img src="https://zupimages.net/up/22/33/qq74.png" alt="image">
</div>
</form>
</div>
</div>
</body>
</html>
It seems the image you are using has black foreground. You can use .form__login-icon img { filter: invert(1); } to make the foreground white. For the horizontal line use box-shadow: 0 2px #000;. Otherwise use an SVG image and apply the fill color of your choice.
the problem is with the images. those images have black background though they are in PNG format.
You can use online tools, Adobe illustrator or photoshop to remove the background from those images. Or you can use images in SVG format
How can I keep the dropdown open on clicking pumpkin icon be able to type something and close the dropdown when clicking anywhere else on screen except dropdown?
I know that something needs to be done here:
.header-bar-mobile-drop-down__icon-button:focus
.header-bar-mobile-drop-down__item
Note: trying to avoid using JS.
I tried to use &:focus in the parent class but it didn't work
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
opacity: 0;
border: 1px solid orange;
}
.header-bar-mobile-drop-down__icon-button:focus
+ .header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button
class="header-bar-mobile-drop-down__icon-button"
tabindex="1"
>
🎃 1
</button>
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
Got the answer which involves using one of new css attributes :focus-within
And moving the dropdown code above to make it a child of the clickable tag, which in my case is button
NOTE: this solution will not work for IE 11
Here is the code:
.header-bar__top {
height: 3.5rem;
background-color: greenyellow;
z-index: 100;
/* box-shadow: $header-bar-shadow; */
padding-top: 15px;
}
.header-bar__container {
position: relative;
height: 100%;
margin-right: auto;
margin-left: auto;
max-width: 1152px;
}
.header-bar {
min-height: 3.5rem;
box-shadow: none;
}
.header-bar-mobile-drop-down {
display: inline;
}
.header-bar-mobile-drop-down__icon-button {
color: darkblue;
border: none;
background-color: transparent;
font-size: 1.5rem;
float: right;
line-height: 1.5rem;
cursor: pointer;
}
.header-bar-mobile-drop-down__item {
visibility: hidden;
border: 1px solid orange;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.header-bar-mobile-drop-down__icon-button:focus-within
.header-bar-mobile-drop-down__item {
visibility: visible;
opacity: 1;
margin-top: 41px;
height: 4.25rem;
background-color: palegreen;
display: inline-flex;
opacity: 1;
align-items: center;
text-align: center;
justify-content: center;
width: 100%;
}
.header-bar-utility {
height: 100%;
padding: 0 0.5rem;
display: flex;
align-items: center;
float: left;
color: pink;
background-color: transparent;
border: none;
font-size: 16px;
line-height: 1.5rem;
text-decoration: none;
cursor: pointer;
}
.header-bar-utility__icon {
display: inline;
font-size: 1.5rem;
}
.header-bar {
height: 3.5rem;
box-shadow: none;
}
.header-bar__toggle-menu {
height: 100%;
padding: 0 1rem 0 0.5rem;
display: flex;
align-items: center;
background-color: transparent;
color: black;
border: none;
font-size: 1.5rem;
min-width: 0;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./test.css" />
<title>Dropdown</title>
</head>
<body>
<div class="header-bar">
<div class="header-bar__top">
<div class="header-bar__container">
<div class="header-bar-mobile-drop-down">
<button class="header-bar-mobile-drop-down__icon-button">
🎃 1
<div class="header-bar-mobile-drop-down__item">
<input placeholder="Search" />
</div>
</button>
</div>
</div>
</div>
</div>
<h1>Text overlayed</h1>
</body>
</html>
Chrome output
Firefox output
.continue-btn {
border: 2px solid #000;
border-radius: 0px!important;
width: 100%;
text-align: center;
padding: 0px;
line-height: 55px;
color: #000;
margin: 6% 0%;
}
.heading-one {
font-size: 14pt;
font-family: Nexabold;
}
<div class="" id="continue-page2" >
<a class="btn continue-btn heading-two" href="#"> CONTINUE <span class="fa fa-arrow-right "></span></a>
</div>
In Firefox, the span is displayed in next line in the button. If I make a change in CSS its affected in Chrome.
See the code below. Hope this will work for you.
#continue-page2 {
border: 2px solid #000;
display: inline-block;
overflow: hidden;
}
#continue-page2 .btn {
float: left;
line-height: 40px;
padding-left: 25px;
text-decoration: none;
color: #000000;
}
#continue-page2 span {
border-left: 2px solid #000;
float: right;
background-color: #831A24;
width: 40px;
height: 40px;
display: block;
text-align: center;
line-height: 40px;
color: #ffffff;
margin-left: 25px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="continue-page2" >
<a class="btn continue-btn heading-two" href="#">CONTINUE
<span class="fa fa-arrow-right"></span></a>
</div>
In Firefox Quantum 59.0.2 (64-bit)
Following code works fine.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<style>
.continue-btn {
border: 2px solid #000;
border-radius: 0px!important;
width: 100%;
text-align: center;
padding: 0px;
line-height: 55px;
color: #000;
margin: 6% 0%;
}
.heading-two {
font-size: 14pt;
font-family: Nexabold;
}
</style>
</head>
<body>
<div class="" id="continue-page2" >
<a class="btn continue-btn heading-two" href="#"> CONTINUE
<span class="fa fa-arrow-right"></span></a>
</div>
</body>
</html>
I did check the other questions, but none of them fixed my problem. When I resize the page, my elements are moving everywhere, all squashed up. I even tried doing a wrapper div, and that didn't help. Are we allowed to post web sites? Because I have the site live.
<!DOCTYPE html>
<html>
<head>
<title>Promises!-Contact</title>
<meta charset="UTF-8">
<style>
#body {
margin: 0 auto;
width: 370px;
height: 1%;
margin-top: 100px;
border-radius: 15px;
border: 5px dotted #00A396;
background-clip: content-box;
background-color: #F8B72E;
text-align: justify;
font-family: Kirvy;
overflow: hidden;
font-size: 13px;
}
#wrapper {
width: 100%;
margin: 0%;
padding: 0%;
}
p { padding: 10px;}
#title {
text-align: center;
font-size: 24px;
top-margin: 0px;
padding: 0px;
}
nav {
font-family: KBAStitchInTime;
font-size: 12px;
color: #EC225F;
right: 220px;
top: 140px;
position: relative;}
#dot1 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot2 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot3 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
#dot4 {
font-size: 100px;
display: inline-block;
line-height: 20px;}
a:link { color:#EC225F; text-decoration:none; }
a:visited{ color: purple; }
a:hover{ color: ;}
a:active {}
body {background-color: #262626;
text-align: left;
}
</style>
</head>
<body>
<div id="wrapper">
<nav>
<span id="dot1">.</span>About<br>
<span id="dot2">.</span>Pages<br>
<span id="dot3">.</span>Poems<br>
<span id="dot4">.</span>Home<br>
</nav>
<div id="body">
<p id="title">Contact!</p>
<p> I love getting mail! Find me at:</p>
</div>
</div>
</body>
</html>
How can I center this search field, by adding to the id #search?
I have tried to add both margin: 0 auto; and left: 50%; to #search, but neither works.
This is a good read... How To Center Anything With CSS
In your case just add width:265px;margin:auto and remove display:inline-block in #search.
Demo: http://codepen.io/anon/pen/ojbbmL
One solution is to add a container for search and using text-align: center:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
background: #61646d;
color: #000;
font: 14px/1.5em"Open Sans", sans-serif;
margin: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
line-height: 1.5em;
margin: 0;
outline: none;
padding: 0;
-webkit-appearance: none;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ---------- SEARCH ---------- */
#search {
background: #42454e;
border-radius: 3px;
display: inline-block;
padding: 7px;
}
#search input {
float: left;
}
#search input[type="search"],
#search input[type="submit"] {
border-radius: 3px;
font-size: 12px;
}
#search input[type="search"] {
background: #fff;
color: #42454e;
min-width: 184px;
padding: 6px 8px;
}
#search input[type="submit"] {
background: #1bba9a;
color: #fff;
font-weight: bold;
margin-left: 7px;
padding: 6px 10px;
}
#search input[type="submit"]:hover {
background: #189e83;
}
#search input[type="search"]::-webkit-input-placeholder {
color: #42454e;
}
#search input[type="search"]:-moz-placeholder {
color: #42454e;
}
#search input[type="search"]:-ms-input-placeholder {
color: #42454e;
}
.searchCont {
text-align: center;
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Search</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="searchCont">
<div id="search">
<form action="javascript:void(0);" method="GET">
<fieldset class="clearfix">
<input type="search" name="search" value="What are you looking for?" onBlur="if(this.value=='')this.value='What are you looking for?'" onFocus="if(this.value=='What are you looking for?')this.value='' ">
<!-- JS because of IE support; better: placeholder="What are you looking for?" -->
<input type="submit" value="Search" class="button">
</fieldset>
</form>
</div>
<!-- end search -->
</div>
</body>
</html>
You just need to add a <div id="container"> before <div id="search"> , like below:
HTML:
<div id="container">
<div id="search">
<form action="javascript:void(0);" method="GET">
// same line of codes
</form>
</div> <!-- end search -->
</div> <!-- end container -->
And just add in css file the below code:
CSS:
#container{
width: 100%;
text-align: center;
}
Working code snippets:
#charset "utf-8";
/* CSS Document */
/* ---------- GENERAL ---------- */
body {
background: #61646d;
color: #000;
font: 14px/1.5em"Open Sans", sans-serif;
margin: 0;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
input {
border: none;
font-family: inherit;
font-size: inherit;
line-height: 1.5em;
margin: 0;
outline: none;
padding: 0;
-webkit-appearance: none;
}
input[type="search"] {
-webkit-appearance: textfield;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
#container {
width: 100%;
text-align: center;
}
/* ---------- SEARCH ---------- */
#search {
background: #42454e;
border-radius: 3px;
display: inline-block;
padding: 7px;
margin: 0 auto;
}
#search input {
float: left;
}
#search input[type="search"],
#search input[type="submit"] {
border-radius: 3px;
font-size: 12px;
}
#search input[type="search"] {
background: #fff;
color: #42454e;
min-width: 184px;
padding: 6px 8px;
}
#search input[type="submit"] {
background: #1bba9a;
color: #fff;
font-weight: bold;
margin-left: 7px;
padding: 6px 10px;
}
#search input[type="submit"]:hover {
background: #189e83;
}
#search input[type="search"]::-webkit-input-placeholder {
color: #42454e;
}
#search input[type="search"]:-moz-placeholder {
color: #42454e;
}
#search input[type="search"]:-ms-input-placeholder {
color: #42454e;
}
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Search</title>
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="container">
<div id="search">
<form action="javascript:void(0);" method="GET">
<fieldset class="clearfix">
<input type="search" name="search" value="What are you looking for?" onBlur="if(this.value=='')this.value='What are you looking for?'" onFocus="if(this.value=='What are you looking for?')this.value='' ">
<!-- JS because of IE support; better: placeholder="What are you looking for?" -->
<input type="submit" value="Search" class="button">
</fieldset>
</form>
</div>
<!-- end search -->
</div>
<!-- end container -->
</body>
</html>