I have created a custom search box with a font awesome info icon on the right side inside the search box. Hovering over this icon gives the user more information about the required input format. It does work nicely for Firefox and Safari (IE not tested), but in Google Chrome, the info icon gets positioned below the input box. Vertical position, however, is correct.
.SearchBox input {
flex: 1!important;
height: 35px!important;
margin: 0px 0 0 0!important;
z-index: 100!important;
background: #fcfcfc!important;
border-top: 1px solid #c4c4c4!important;
border-bottom: 1px solid #cecece!important;
border-left: 1px solid #cecece!important;
border-right: 1px solid #cecece!important;
margin-left: 0px!important;
font: inherit!important;
outline: none!important;
/* remove focus ring from Webkit */
line-height: 1.2!important;
padding: 5px!important;
padding-left: 12px!important;
padding-right: 36px!important;
width: 100%!important;
/* <-- Set size to 100% */
font-size: 15px!important;
transition: 0.15s ease-in!important;
}
.right-inner-addon {
position: relative!important;
}
.right-inner-addon input {
padding-right: 30px!important;
}
.right-inner-addon i {
position: absolute!important;
right: 1px!important;
padding: 10px 8px!important;
cursor: pointer!important;
}
.fa-searchinfo {
color: #808287!important;
font-size: 11.5pt!important;
}
.fa-searchinfo:hover {
color: #565859!important;
font-size: 11.5pt!important;
}
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<div class="SearchBox">
<div class="right-inner-addon">
<input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder="enter ID" value="" />
<a title="Some detailed information about possible input formats." class="fa-searchinfo"><i class="fa fa-info-circle" ></i></a>
</div>
</div>
Just replace .right-inner-addon i with below css :
.right-inner-addon a {
position: absolute!important;
right: 1px!important;
top:6px!important;
padding: 10px 8px!important;
cursor: pointer!important;
}
.SearchBox input {
flex: 1!important;
height: 35px!important;
margin: 0px 0 0 0!important;
z-index: 100!important;
background: #fcfcfc!important;
border-top: 1px solid #c4c4c4!important;
border-bottom: 1px solid #cecece!important;
border-left: 1px solid #cecece!important;
border-right: 1px solid #cecece!important;
margin-left: 0px!important;
font: inherit!important;
outline: none!important;
line-height: 1.2!important;
padding: 5px!important;
padding-left: 12px!important;
padding-right: 36px!important;
width: 100%!important;
font-size: 15px!important;
transition: 0.15s ease-in!important;
-webkit-transition: 0.15s ease-in!important;
-moz-transition: 0.15s ease-in!important;
-ms-transition: 0.15s ease-in!important;
}
.right-inner-addon {
position: relative!important;
}
.right-inner-addon input {
padding-right: 30px!important;
}
.right-inner-addon a {
position: absolute!important;
right: 1px!important;
top:6px!important;
padding: 10px 8px!important;
cursor: pointer!important;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="SearchBox">
<div class="right-inner-addon">
<input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder= "enter ID" value= "" />
<a title="Some detailed information about possible input formats." class = "fa-searchinfo" ><i class="fa fa-info-circle" ></i></a>
</div>
</div>
.SearchBox input {
flex: 1!important;
height: 35px!important;
margin: 0px 0 0 0!important;
z-index: 100!important;
background: #fcfcfc!important;
border-top: 1px solid #c4c4c4!important;
border-bottom: 1px solid #cecece!important;
border-left: 1px solid #cecece!important;
border-right: 1px solid #cecece!important;
margin-left: 0px!important;
font: inherit!important;
outline:none!important; /* remove focus ring from Webkit */
line-height: 1.2!important;
padding: 5px!important;
padding-left: 12px!important;
padding-right: 36px!important;
width: 100%!important; /* <-- Set size to 100% */
font-size: 15px!important;
transition: 0.15s ease-in!important;
}
.right-inner-addon {
position: relative!important;
}
.right-inner-addon input {
padding-right: 30px!important;
}
.span {
float: right;
margin-right: 6px;
margin-top:-30px;
position: relative;
z-index: 2;
color: red;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="SearchBox">
<div class="right-inner-addon">
<input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder= "enter ID">
<a title="Some detailed information about possible input formats." class = "fa-searchinfo" ><i class="fa fa-info-circle span"></i></a>
</div>
</div>
Related
I"ve created a dummy registration form in HTML and added some CSS
and the label tag which i used is aligned to the left corresponding to the input
and
I want to align this label into top of the input form when the width is
like this
#media (max-width:520px)
to make this responsive
I've tried display block but it does not work
like this when width is below 520px
Here's the Code
HTML
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>This</title>
<link rel="stylesheet" href="style4.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
<body>
<div id="fmr">
<div class="titl">Registration Form</div>
<form action="info.php">
<div class="input_fld">
<label>First Name : </label>
<input type="text" />
</div>
<div class="input_fld">
<label>Last name : </label>
<input type="text" />
</div>
<div class="input_fld">
<label> Email Address : </label>
<input type="email" />
</div>
<div class="input_fld">
<label>Gender : </label>
<div class="slgn">
<select name="gender" id="gender">
<option value="select">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="input_fld">
<label for="idc"> Phone Number:</label>
<input type="tel" pattern="[+]{0-2}{0-12}" />
</div>
<div class="input_fld">
<label for="ide"> Address : </label>
<textarea class="address"></textarea>
</div>
<div class="input_sl">
<label class="chckbx">
<input type="checkbox" />
<i class="fa-regular fa-square"></i>
<i class="fa-solid fa-square-check"></i>
<span class="ttbx"> Do you agree to the terms and conditions </span>
</label>
</div>
<div class="input_fld">
<input type="submit" value="Register" class="btn" />
</div>
</form>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
*{
margin: 0;
padding: 0;
font-family: TitilliumWeb,sans-serif;
box-sizing: border-box;
}
body{
background-color: rgb(149, 101, 82);
padding: 0 10px;
}
.titl{
display: block;
font-size: 20px;
font-weight:bold;
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 7px;
}
form {
width: 100%;
}
#fmr{
box-shadow: 2px 2px 4px 3px rgba(36, 36, 36, 0.704);
background-color: rgb(181, 175, 169);
width: 50%;
max-width: 500px;
margin: 50px auto;
padding: 25px;
text-align: center;
border-radius: 8px;
}
.input_fld{
margin-bottom: 17px;
margin-right: 5px;
margin-left: 0;
display: flex;
align-items: center;
}
.input_fld > label{
display: flex;
width: 200px;
margin-right: 40px;
font-size: 17px;
}
.slgn{
position: relative;
width: 100%;
height: 5vh;
}
.slgn select{
appearance:none;
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
outline: none;
width: 100%;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
.slgn:before{
content: "";
position: absolute;
top: 13px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent ;
pointer-events: none;
}
.slgn select:focus {
border: 3px solid #fec107;
animation: 0.8s ease;
}
input[type="text"] {
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
width: 100%;
margin: 5px auto;
height: 6vh;
background-color: none;
border: none;
outline: none;
padding: 8px 10px;
border-radius: 3px;
font-size: 15px;
transition: all 0.3s ease;
}
input[type="text"]:focus {
border: 3px solid #fec107;
animation: 0.8s ease;
}
input[type="tel"] {
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
text-decoration: none;
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 5.5vh;
padding: 8px 10px;
border-radius: 3px;
font-size: 16px;
transition: all 0.3s ease;
}
input[type="tel"]:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
input[type="email"]{
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 6vh;
padding: 8px 10px;
border-radius: 3px;
font-size: 15px;
transition: all 0.3s ease;
}
input[type="email"]:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
.input_fld textarea{
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);;
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 88px;
resize: none;
border-radius: 3px;
font-size: 17px;
padding:10px 13px;
}
.input_fld textarea:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
input[type="checkbox"], .chckbx .fa-square-check {
display: none;
}
.fa-square{
font-size: 1.3em;
}
input[type="checkbox"]:checked ~ .fa-square-check {
display: inline-block;
font-size: 1.3em;
}
input[type="checkbox"]:checked ~ .fa-square {
display: none;
}
.chckbx i:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
i {
margin-right: 3px;
}
.ttbx{
cursor: pointer;
font-size: 18.8px;
margin-left: 5px;
margin-right: 74px;
}
.input_fld .btn{
width: 100%;
padding: 9px 11px;
font-size: 19px;
border: 0px;
background: #6b8669;
color: #343533;
cursor: pointer;
border-radius: 4px;
outline: none;
margin: 10px 0 auto;
}
.input_fld:last-child{
margin-bottom: 0;
}
#media (max-width:520px) {
.fmr form .input_fld{
flex-direction: column;
align-items: flex-start;
}
.fmr .input_fld label{
display: block;
}
.fmr form .input_fld{
flex-direction: row;
}
}
Thank You
Here you can see
You can access the id via #element_id.
#media (max-width:520px) {
#fmr form .input_fld{
flex-direction: column;
align-items: flex-start;
}
}
#import url('https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap');
*{
margin: 0;
padding: 0;
font-family: TitilliumWeb,sans-serif;
box-sizing: border-box;
}
body{
background-color: rgb(149, 101, 82);
padding: 0 10px;
}
.titl{
display: block;
font-size: 20px;
font-weight:bold;
text-align: center;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 7px;
}
form {
width: 100%;
}
#fmr{
box-shadow: 2px 2px 4px 3px rgba(36, 36, 36, 0.704);
background-color: rgb(181, 175, 169);
width: 50%;
max-width: 500px;
margin: 50px auto;
padding: 25px;
text-align: center;
border-radius: 8px;
}
.input_fld{
margin-bottom: 17px;
margin-right: 5px;
margin-left: 0;
display: flex;
align-items: center;
}
.input_fld > label{
display: flex;
width: 200px;
margin-right: 40px;
font-size: 17px;
}
.slgn{
position: relative;
width: 100%;
height: 5vh;
}
.slgn select{
appearance:none;
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
outline: none;
width: 100%;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
.slgn:before{
content: "";
position: absolute;
top: 13px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent ;
pointer-events: none;
}
.slgn select:focus {
border: 3px solid #fec107;
animation: 0.8s ease;
}
input[type="text"] {
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
width: 100%;
margin: 5px auto;
height: 6vh;
background-color: none;
border: none;
outline: none;
padding: 8px 10px;
border-radius: 3px;
font-size: 15px;
transition: all 0.3s ease;
}
input[type="text"]:focus {
border: 3px solid #fec107;
animation: 0.8s ease;
}
input[type="tel"] {
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
text-decoration: none;
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 5.5vh;
padding: 8px 10px;
border-radius: 3px;
font-size: 16px;
transition: all 0.3s ease;
}
input[type="tel"]:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
input[type="email"]{
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 6vh;
padding: 8px 10px;
border-radius: 3px;
font-size: 15px;
transition: all 0.3s ease;
}
input[type="email"]:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
.input_fld textarea{
box-shadow: 2px 2px 4px rgba(36, 36, 36, 0.558);;
margin: 5px auto;
width: 100%;
background-color: none;
border: none;
outline: none;
height: 88px;
resize: none;
border-radius: 3px;
font-size: 17px;
padding:10px 13px;
}
.input_fld textarea:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
input[type="checkbox"], .chckbx .fa-square-check {
display: none;
}
.fa-square{
font-size: 1.3em;
}
input[type="checkbox"]:checked ~ .fa-square-check {
display: inline-block;
font-size: 1.3em;
}
input[type="checkbox"]:checked ~ .fa-square {
display: none;
}
.chckbx i:focus {
border: 3px solid #fec107;
transition: 0.8s ease;
}
i {
margin-right: 3px;
}
.ttbx{
cursor: pointer;
font-size: 18.8px;
margin-left: 5px;
margin-right: 74px;
}
.input_fld .btn{
width: 100%;
padding: 9px 11px;
font-size: 19px;
border: 0px;
background: #6b8669;
color: #343533;
cursor: pointer;
border-radius: 4px;
outline: none;
margin: 10px 0 auto;
}
.input_fld:last-child{
margin-bottom: 0;
}
#media (max-width:520px) {
#fmr form .input_fld{
flex-direction: column;
align-items: flex-start;
}
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>This</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"/>
<body>
<div id="fmr">
<div class="titl">Registration Form</div>
<form action="info.php">
<div class="input_fld">
<label>First Name : </label>
<input type="text" />
</div>
<div class="input_fld">
<label>Last name : </label>
<input type="text" />
</div>
<div class="input_fld">
<label> Email Address : </label>
<input type="email" />
</div>
<div class="input_fld">
<label>Gender : </label>
<div class="slgn">
<select name="gender" id="gender">
<option value="select">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="input_fld">
<label for="idc"> Phone Number:</label>
<input type="tel" pattern="[+]{0-2}{0-12}" />
</div>
<div class="input_fld">
<label for="ide"> Address : </label>
<textarea class="address"></textarea>
</div>
<div class="input_sl">
<label class="chckbx">
<input type="checkbox" />
<i class="fa-regular fa-square"></i>
<i class="fa-solid fa-square-check"></i>
<span class="ttbx"> Do you agree to the terms and conditions </span>
</label>
</div>
<div class="input_fld">
<input type="submit" value="Register" class="btn" />
</div>
</form>
</div>
</body>
</html>
I Googled for the above mentioned problem, but I still require the help from the stack overflow community.
In my login form, I am using font awesome icon. I have 2 input boxes for username and password respectively.
I want to display fa-user-cirle icon on top of the username input. The login form is displayed in a div as follows:
<div class="loginDiv">
<form>
<i class="fa fa-user-circle"></i>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<button mat-button (click)="submit()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
The CSS for icon is:
#import '~#angular/material/theming';
#include mat-core();
$yaana-app-primary: mat-palette($mat-orange, 800,400,200);
.firstDiv {
height: 40%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: orangered;
display: inline-block;
}
.secondDiv {
position: absolute;
width: 100%;
bottom: 0;
height: 60%;
left: 0;
right: 0;
background-color:whitesmoke;
display: inline-block;
}
.loginDiv {
border: 1px solid black;
background: white;
left: 50%;
position: absolute;
top: 28%;
transform: translate(-50%);
background-color: #fff;
padding: 15px;
box-shadow:1px 3px 10px rgba(0, 0, 0, 0.34);
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
width: 215px;
height: 36px;
line-height: 36px;
background: transparent;
border-radius: 3px;
will-change: transform;
-webkit-transition: all .2s ease;
transition: all .2s ease;
border: none;
/*border: 2px solid #FF5126;*/
cursor: pointer;
background: #F26722;
font-size: 16px;
color: #fff;
outline: none;
text-align: center;
padding: 0 6px;
margin: 6px 8px;
font-size: 14px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
text-transform: uppercase !important;
}
button:hover {
opacity: 0.8;
}
.loginImgContainer {
display: table;
max-height: 40px;
max-width: 40px;
}
i.fa {
background: #fff;
display: inline-block;
transform: scale(4,4);
border-radius: 50%;
}
The output I am getting is as follows:
But I want the icon to appear just above the username input and at the centre.
Please help me.
Adding this 'centericon' Class and css
.centericon{
font-size:36px;
position:absolute;
top:-18px;
left:50%;
transform:translate(-50%,0);
z-index:99;
background:white;
}
.firstDiv {
height: 40%;
width: 100%;
top: 0;
left: 0;
right: 0;
position: absolute;
background-color: orangered;
display: inline-block;
}
.secondDiv {
position: absolute;
width: 100%;
bottom: 0;
height: 60%;
left: 0;
right: 0;
background-color:whitesmoke;
display: inline-block;
}
.loginDiv {
border: 1px solid black;
background: white;
left: 50%;
position: absolute;
top: 28%;
transform: translate(-50%);
background-color: #fff;
padding: 15px;
box-shadow:1px 3px 10px rgba(0, 0, 0, 0.34);
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
width: 215px;
height: 36px;
line-height: 36px;
background: transparent;
border-radius: 3px;
will-change: transform;
-webkit-transition: all .2s ease;
transition: all .2s ease;
border: none;
/*border: 2px solid #FF5126;*/
cursor: pointer;
background: #F26722;
font-size: 16px;
color: #fff;
outline: none;
text-align: center;
padding: 0 6px;
margin: 6px 8px;
font-size: 14px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
text-transform: uppercase !important;
}
button:hover {
opacity: 0.8;
}
.loginImgContainer {
display: table;
max-height: 40px;
max-width: 40px;
}
.centericon{
font-size:36px;
position:absolute;
top:-18px;
left:50%;
transform:translate(-50%,0);
z-index:99;
background:white;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="loginDiv">
<form>
<div class="centericon">
<i class="fa fa-user-circle"></i>
</div>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<button mat-button (click)="submit()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
Try with adding row above the container,
<div class="loginDiv">
<form>
<div class="row center">
<i class="fa fa-user-circle"></i>
</div>
<div class="container">
<input type="text" placeholder="Username" name="uname" required>
<input type="password" placeholder="Password" name="psw" required>
<button mat-button (click)="submit()">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
</form>
</div>
Thanks for giving me hint and found out the solution with following changes in css,
i.fa {
background: #fff;
display: inline-block;
font-size: 80px;
transform: translateY(-60%);
transform: translateX(160%);
border-radius: 50%;
}
I am trying to add an expandable search box to a row of items. I'm using the example here as the core of this. Here is my jsfiddle. I tried to simulate the problem by limiting the widths. All of the style statements are just for formatting it here. The main problem is that I want to give the search div just enough room to display a search icon. And then, when it's moused over, it should expand to allow input. As you can see, it expands but in the wrong direction.
The original code had "float: right !important;" instead of the "position:fixed !important; z-index:100;" I changed it to. I did that thinking I could control the placement. And it worked, sort of. But the result isn't what I want.
In short, the code as provided by the source site works correctly but only when the search icon is on a line by itself. Can it be placed on a line with other elements and still expand as needed?
Here's the code I am using:
<style>
.search-form .form-group {
position:fixed !important;
z-insex:100;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
</style>
<div style="width:250px;border:1px solid">
<div style="display:inline-block;width:100px;border:1px solid;"><img src="example.com/test.png" width="100"></div>
<div style="display:inline-block;width:80px;border:1px solid;vertical-align:top;">A block of text</div>
<div class="search" style="display:inline-block;vertical-align:top;">
<div class="searchbox-margin">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="keywords" id="search" placeholder="Search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
</div>
</div>
Try the following code.
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 50%;
border-radius: 4px 25px 25px 4px;
/*transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;*/
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
.search-form .form-group input.form-control {
border: 0 none;
box-shadow: none;
display: block;
height: 27px;
margin-top: 2px;
width: 87%;
padding-right: 20px;
background: transparent;
}
.search-form .form-group {
position: fixed !important;
z-index: 100;
transition: all 0.35s, border-radius 0s;
width: 48px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
margin-top:2px;
}
<div style="width:250px;border:1px solid">
<div style="display:inline-block;width:100px;border:1px solid;"><img src="example.com/test.png" width="100"></div>
<div style="display:inline-block;width:80px;border:1px solid;vertical-align:top;">A block of text</div>
<div class="search" style="display:inline-block;vertical-align:top;">
<div class="searchbox-margin">
<form action="" class="search-form">
<div class="form-group has-feedback">
<input type="text" class="form-control" name="keywords" id="search" placeholder="Search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
</div>
</div>
I try the possible solutions posted here with this problem but no one works with my code, this is what I have
<div class="search">
<span class="fa fa-user"></span>
<input placeholder="Username...">
</div>
<div class="search">
<span class="fa fa-lock"></span>
<input placeholder="*******">
</div>
CSS
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body { margin: 30px; }
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input { text-indent: 32px;}
I want the icon before the placeholder.
Here its the example code
Try this, I just add some css to your icons.
.search .fa-user {
position: absolute;
top: 10px;
left: 10px;
}
.search .fa-lock {
position: absolute;
top: 10px;
left: 10px;
}
Here is your code updated
<style>
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
body { margin: 30px; }
.search {
position: relative;
color: #aaa;
font-size: 16px;
}
.search input {
width: 250px;
height: 32px;
background: #fcfcfc;
border: 1px solid #aaa;
border-radius: 5px;
box-shadow: 0 0 3px #ccc, 0 10px 15px #ebebeb inset;
}
.search input { text-indent: 32px;}
.search .fa-user {
position: absolute;
top: 10px;
left: 10px;
}
.search .fa-lock {
position: absolute;
top: 10px;
left: 10px;
}
</style>
<div class="search">
<span class="fa fa-user"></span>
<input placeholder="Username...">
</div>
<div class="search">
<span class="fa fa-lock"></span>
<input placeholder="*******">
</div>
Currently I developing a registration form ... And I wish to include step by step for the user ... Code at the bottom I get from other site and I already modified some css ... however the element are showing in vertical ... What I need is horizontal ... I tried to position but it doesn't work ...
Currently Display
What I need
In HTML
<div class="steps">
<div id='genger' name='genger'/><label >Step 1</label></div>
<div id='genger' name='genger'/><label>Step 2</label></div>
<div id='genger' name='genger'/><label >Step 3</label></div>
<div id='genger' name='genger'/><label>Step 4</label></div>
<div id='genger' name='genger'/><label >Step 5</label></div>
</div>
In CSS
.steps{
width: 200px;
display:inline-block;
position: relative;
padding: 1em 2em 1em 3em;
vertical-align: top;
}
label{
background: #393D40;
height: 69px;
line-height: 69px;
width: 100%;
display: block;
border-bottom: 1px solid #44494e;
color: #889199;
text-transform: uppercase;
font-weight: 900;
font-size: 11px;
letter-spacing: 1px;
text-indent: 52px;
cursor: pointer;
transition: all 0.3s ease
}
label:before{
content:"";
width: 12px;
height: 12px;
border: 2px solid #25292e;
display: block;
position: absolute;
margin: 26px 0px 0px 18px;
border-radius: 100%;
transition: border 0.7s ease
}
label[for=genger]{
border-radius: 3px 3px 0px 0px;
}
label:hover{
background: #2B2E30;
color: #46b7e5
}
label:hover:before{
border: 2px solid #46b7e5;
}
Click for JSFiddle
Demo on Fiddle
HTML:
<div class="steps">
<div class='genger'>
<label>Step 1</label>
</div>
<div class='genger'>
<label>Step 2</label>
</div>
<div class='genger'>
<label>Step 3</label>
</div>
<div class='genger'>
<label>Step 4</label>
</div>
<div class='genger'>
<label>Step 5</label>
</div>
</div>
CSS:
.genger {
display: inline-block;
vertical-align: top;
margin: -1px;
}
.steps {
width: 100%;
display:inline-block;
position: relative;
vertical-align: top;
}
label {
background: #393D40;
height: 69px;
line-height: 69px;
width: 150px;
display: block;
border-bottom: 1px solid #44494e;
color: #889199;
text-transform: uppercase;
font-weight: 900;
font-size: 11px;
letter-spacing: 1px;
text-indent: 52px;
cursor: pointer;
transition: all 0.3s ease
}
label:before {
content:"";
width: 12px;
height: 12px;
border: 2px solid #25292e;
display: block;
position: absolute;
margin: 26px 0px 0px 18px;
border-radius: 100%;
transition: border 0.7s ease
}
label:hover {
background: #2B2E30;
color: #46b7e5
}
label:hover:before {
border: 2px solid #46b7e5;
}
First i have taken out your .steps width just removed the padding
you had also given your genger div codes as
<div id='genger' name='genger'/><label >Step 1</label></div>
you have closed the div before the label had started, I changed it to,
<div class='genger' name='genger'><label >Step 1</label></div>
also named your id genger to class
hence here is the final code...
#wrapper{
width:1200px;
margin:0 auto
}
.steps{
display:inline-block;
position: relative;
/*padding: 1em 2em;*/
vertical-align: top;
background:red;
width:100%;
}
.genger{
width:20%;
min-width:150px;
float:left;
}
label{
background: #393D40;
height: 69px;
line-height: 69px;
width: 100%;
display: block;
border-bottom: 1px solid #44494e;
color: #889199;
text-transform: uppercase;
font-weight: 900;
font-size: 11px;
letter-spacing: 1px;
text-indent: 52px;
cursor: pointer;
transition: all 0.3s ease
}
label:before{
content:"";
width: 12px;
height: 12px;
border: 2px solid #25292e;
display: block;
position: absolute;
margin: 26px 0px 0px 18px;
border-radius: 100%;
transition: border 0.7s ease
}
label[for=genger]{
border-radius: 3px 3px 0px 0px;
}
label:hover{
background: #2B2E30;
color: #46b7e5
}
label:hover:before{
border: 2px solid #46b7e5;
}
<div id="wrapper">
<div class="steps">
<div class='genger' name='genger'><label >Step 1</label></div>
<div class='genger' name='genger'><label>Step 2</label></div>
<div class='genger' name='genger'><label >Step 3</label></div>
<div class='genger' name='genger'><label>Step 4</label></div>
<div class='genger' name='genger'><label >Step 5</label></div>
</div>
<div>
Hope this helps.
P.S : you can center this menu as well . just wrap it inside a bigger div and give margin: 0 auto
EDIT:: If you want to be more flexible in your widths, you can add width:100% in the steps class and width 20% in genger class. See updated code snippet now
DEMO
check the demo, i have added in css
.steps {
width: 100%;
margin: 20px;
vertical-align: top;
}
.genger {float: left;width: 150px; }