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>
Related
How do I adjust the text input position in the input box? I did do input[type=text] but it messes up my input box's position completely. I did change my ::placeholder left margin a little bit in case if you want to know.
HTML & CSS
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.registerbox-front ::placeholder {
padding-left: 10px;
}
.box-firstline, .box-secondline {
margin-top: 10px
}
<body>
<div class="registerbox">
<div class="inner-registerbox">
<div class="registerbox-front">
<h2>BORANG PENDAFTARAN MURID</h2>
<form>
<section>
<div class="box-firstline">
<div style="float:left;margin-right:25px;">
<label for="idmurid">ID Murid</label> <br />
<input type="text" name="idmurid" class="input-box2" placeholder="ID Murid" required>
</div>
<div style="float:left;">
<label for="namamurid">Nama Murid</label> <br />
<input type="text" name="namamurid" class="input-box3" placeholder="Nama Murid" required>
</div>
</div>
<br style="clear:both;" />
</section>
<div class="box-secondline">
<div style="float:left;margin-right:25px;">
<label for="namakelas">Nama Kelas</label> <br />
<input type="text" name="namakelas" class="input-box2" placeholder="Nama Kelas" required>
</div>
<div style="float:left;">
<label for="katalaluan_murid">Kata Laluan</label> <br />
<input type="password" name="katalaluan_murid" class="input-box3" placeholder="Katalaluan" required>
</div>
<br style="clear:both;" />
</div>
</div>
</div>
</body>
I took the code you posted, removed the ::placeholder padding and then added
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
And it adjusted the the text to match the placeholder.
Here is the full CSS:
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.box-firstline, .box-secondline {
margin-top: 10px;
}
I'm sure this is something simple but i'm exhausted trying to figure it out. I've tried a lot of different variations and I just can't get the search button to sit on the same line as the search bar. I'm at my wits end. Why are they on two different lines???
.container-inner {
width: 100%;
position: relative;
display: flex;
}
#search-bar {
width: 90%;
border: 2px solid #fff200;
border-right: none;
padding: 5px;
height: 40px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
#search-bar:focus{
color: black;
}
.searchButton {
width: 40px;
height: 36px;
border: 2px solid #fff200;
background: grey;
text-align: center;
color: black;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.searchButton:hover{
background: darkslategrey
}
.container {
width: 50%;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="container-inner">
<form id="search-form">
<div class="input-group input-group-lg">
<input id="search-bar" class="form-control search-bar" placeholder="Search for a song...">
<button type="submit" class="searchButton">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</form>
</div>
You should change add a wrapper with display flex, set the property flex of #search-bar to 1 and remove the height from the #search-bar as in the following example.
.container-inner {
width: 100%;
position: relative;
display: flex;
}
#search-bar {
border: 2px solid #fff200;
border-right: none;
padding: 5px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
flex: 1;
}
#search-bar:focus {
color: black;
}
.searchButton {
width: 40px;
height: 36px;
border: 2px solid #fff200;
background: grey;
text-align: center;
color: black;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.searchButton:hover {
background: darkslategrey
}
.container {
width: 50%;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.input-wrapper {
display: flex;
}
<div class="container">
<div class="container-inner">
<form id="search-form">
<div class="input-group input-group-lg input-wrapper">
<input id="search-bar" class="form-control search-bar" placeholder="Search for a song...">
<button type="submit" class="searchButton">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
</form>
</div>
</div>
Give .input-group display: flex;
.container-inner {
width: 100%;
position: relative;
display: flex;
}
#search-bar {
width: 90%;
border: 2px solid #fff200;
border-right: none;
padding: 5px;
height: 40px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
#search-bar:focus{
color: black;
}
.searchButton {
width: 40px;
height: 36px;
border: 2px solid #fff200;
background: grey;
text-align: center;
color: black;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.searchButton:hover{
background: darkslategrey
}
.input-group{
display: flex;
}
<div class="container">
<div class="container-inner">
<form id="search-form">
<div class="input-group input-group-lg">
<input id="search-bar" class="form-control search-bar" placeholder="Search for a song...">
<button type="submit" class="searchButton">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</form>
</div>
Your width on searchBar of width: 90%; is taking up too much space. 90% of the parent + it's own padding is leaving less than 40px; needed for the button to sit alongside. Remove the width of the searchBar or make it less like 70% etc.
.container-inner {
width: 100%;
position: relative;
display: flex;
}
#search-bar {
border: 2px solid #fff200;
border-right: none;
padding: 5px;
height: 40px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9DBFAF;
}
#search-bar:focus{
color: black;
}
.searchButton {
width: 40px;
height: 36px;
border: 2px solid #fff200;
background: grey;
text-align: center;
color: black;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.searchButton:hover{
background: darkslategrey
}
.container {
width: 50%;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<div class="container-inner">
<form id="search-form">
<div class="input-group input-group-lg">
<input id="search-bar" class="form-control search-bar" placeholder="Search for a song...">
<button type="submit" class="searchButton">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</form>
</div>
try changing that display attribute for the inner container
I'm trying to make a small web page with a search bar and an accounts menu (currently just a circle), but I've noticed, when I zoom in, or resize the page, the accounts menu overflows onto the search bar. I've tried changing from absolute positioning, to relative and adjusting the right: 30px accordingly, but this didn't work. I'm incredibly stuck, can anyone offer any advice/code?
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: 500px;
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
width: 600px;
position: absolute;
left: 200px;
top: 15px;
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
position: absolute;
left: 0;
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
position: absolute;
right: 30px;
width: 66px;
height: 66px;
top: 4px;
padding: 0px;
border-radius: 100%;
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
If you remove the absolute positioning and stick with the default relative, then use a display of inline-block (Read up on what it does here: https://www.w3schools.com/css/css_inline-block.asp) and use dynamic widths instead of static ones, you should get your desired result.
See the updated code below;
body {
font-family: "PT-Sans", sans-serif;
background-color: #bbb;
}
input:focus {
outline: none;
}
.search-btn {
border: none;
padding: 12px;
font-size: 18px;
background-color: #009AFF;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
color: white;
width: 70px;
position: relative;
right: 5px;
cursor: pointer;
}
.input {
width: calc(100% - 100px); /* CHANGED */
padding: 11px;
font-size: 18px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
border: 1px solid #777;
}
.search {
max-width: 600px; /* CHANGED */
width: calc(100% - 300px); /* ADDED */
/* position: absolute; REMOVED */
/* left: 200px; REMOVED */
/*top: 15px; REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
}
.logo a {
color: #009AFF;
font-size: 38px;
text-decoration: none;
}
.logo {
/*position: absolute; //REMOVED */
/*left: 0; //REMOVED */
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
top: 12px;
width: 200px;
}
.content {
width: 300px;
border: 2px solid #eee;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
top: 65px;
padding: 5px;
}
#account-items {
display: none;
background-color: #fff;
width: 300px;
border: 2px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
right: 0px;
top: 72px;
padding: 5px;
}
/*.accounts:hover #account-items {
display: inline;
}*/
#account-items a {
color: #009AFF;
text-decoration: none;
display: block;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
}
#account-items a:hover {
background-color: #eee;
}
.accounts {
cursor: pointer;
/* position: absolute; REMOVED */
/* right: 30px; REMOVED */
width: calc(100% - 809px); /* CHANGED */
height: 66px;
/* top: 4px; REMOVED */
padding: 0px;
border-radius: 100%;
display: inline-block; /* ADDED */
vertical-align: middle; /* ADDED */
text-align: right; /* ADDED */
}
.accounts .image {
background-image: url("/email/scripts/profile.png");
background-size: 100%;
background-repeat: no-repeat;
border: 1px solid #777;
border-radius: 100%;
width: 63px;
height: 63px;
display: inline-block; /* ADDED */
}
a {
color: #009AFF;
text-decoration: none;
}
.js-is-hidden {
display: none;
}
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="body">
<div class="header">
<div class="logo">
<center>Unnamed</center>
</div>
<div class="search">
<form action="search.php" method="GET">
<input type="text" name="q" class="input" autocomplete="off" />
<button type="submit" class="search-btn">Go</button>
</form>
</div>
<div class="accounts">
<div class="image">
</div>
</div>
</div>
</div>
try this
.header {
position: relative;
min-width: 900px;
}
https://jsfiddle.net/59ncte3m/1/
It will avoid the issue where your menu gets drawn on top of the search by making the header a positioned element, the menu absolute position will be relative to the header. giving it a min-width will make sure all elements fit within.
This is still not a good responsive design, as it should avoid pixel dimentions, but it is enough to fix the overflowing issue.
What i am doing is that in search box when user enter a search term, i display a close button ('x' character to be specific, embedded as content after reset button) to clear the contents of search box.
It works fine in both Chrome and IE but not in firefox.
Any kind of help would be highly appreciated.
.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
</div>
This code should help you
.search-box,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box
{
width:300px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent,
display: inline-block;
vertical-align: middle;
outline: 0;
position: absolute;
top:19px;
left:305px;
z-index:1;
padding: 1px 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset">X</button>
</form>
</div>
NOTE : set your .search-box width and according to it set left of your .close-icon
Try this code: Hope this solve your problem. Adjust "outer_box" class for width.
<style>
.search-box, .search-wrapper {
padding: 10px;
box-sizing: border-box;
}
.search-box {
position:relative;
width:100%;
}
.outer_boxs{
position:relative;
width:60%;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent,
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
position: absolute;
right:5px;
top: 10px;
background:#f2f2f2;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
</style>
<div class="search-wrapper">
<form>
<div class="outer_boxs" >
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset">X</button>
</div>
</form>
</div>
Im not having sucess put my icon font inside my search input.
I already try with margin, padding, but nothing is working!
Can you give me a little help?
The fiddle with the problem:
http://jsfiddle.net/Tj7nJ/1/
My Html:
<li id="sb-search" style="float:right; list-style:none; height:20px; bottom:3px; ">
<form id="search">
<input name="q" type="text" size="40" placeholder="Pesquisar..." />
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</li>
My css:
#search {
outline:none ;
border:none ;
}
#search button[type="submit"] {
width: 20px;
background:none;
cursor:pointer;
height:20px;
}
button[type="submit"]>i:hover
{
color: #fff;
}
button[type="submit"]>i
{
background:none;
color:#ccc;
font-size:1.1em;
}
#search input[type="text"]
{
border: 0 none;
background: #141d22;
text-indent: 0;
width:110px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
You can't put an image inside an <input type='text'> element.
However, you can remove the borders of the input with:
input[type='text'] {
background-color:transparent;
border: 0px solid;
}
and then wrap it with the icon inside a div and re-style.
Example code:
Here is a jsFiddle for you: http://jsfiddle.net/hxjY7/
Here is the code:
<style type="text/css">
#textBoxWrapper{
border: 1px solid black;
width: 172px;
height: 20px;
}
#textBox {
background-color:transparent;
border: 0px solid;
width: 150px;
height: 20px;
float:left;
}
#icon{
width: 20px;
height: 20px;
background-color: grey;
float:left;
}
</style>
<div id="textBoxWrapper">
<div id="icon"></div>
<input type="text" id="textBox" />
</div>
If you are trying to move the button inside the input field, you could set the button to position absolute (and the search wrapper to relative):
http://jsfiddle.net/Tj7nJ/3/
#search {
outline: none;
border: none;
}
#search {
position: relative;
z-index: 1;
}
#search button[type="submit"] {
width: 20px;
background: none;
cursor: pointer;
height: 20px;
z-index: 2;
position: absolute;
top: 3px;
right: 10px;
}
button[type="submit"]>i:hover {
color: #fff;
}
button[type="submit"]>i {
background: none;
color: #ccc;
font-size: 1.1em;
}
#search input[type="text"] {
border: 0 none;
background: #141d22;
text-indent: 0;
width: 110px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
I think this is what you are trying to do. jsFilddle
HTML:
<form id="search" action="#" method="post">
<fieldset>
<input type="text" id="q" name="q" size="40" placeholder="Search..." />
<button type="submit"><i class="fa fa-search"></i>
</button>
</fieldset>
</form>
CSS:
form#search fieldset {
position: relative;
border: none;
}
form#search input[type='text'] {
padding: 4px;
}
form#search button {
position: absolute;
top: 9px;
left: 262px;
}