When I try to make a searchbar we use <input type="text" placeholder="Search..">
but that will create a new text box to use. If I try <input type="image" src="/sources/Search_Icon_v.png" name="saveForm
it shows as a button.
So what I want here is an image to be used as a textbox/search bar
goal :
#search-input{
/*use your own image path*/
background: url(https://img.icons8.com/metro/x/search.png) no-repeat scroll 7px 7px;
padding-left:30px; /*you may change according to your image width*/
height:35px /*you may change according to you image height*/
}
<input type="text" placeholder="Search..." id="search-input"/>
Hope you meant to having a background image within a txtbox? If so
Answer
<input id="txtSearch" type="text" placeholder="Search..">
<style>
#txtSearch{
background-image: url(https://www.metoffice.gov.uk/binaries/content/gallery/metofficegovuk/hero-images/advice/maps-satellite-images/satellite-image-of-globe.jpg);
}
</style>
Related
As you can see in the picture above, the placeholder text of the search bar is a bit to the middle, how do move it to the left side?
The HTML code for this part is
<form class="navbar-form" action="/action_page.php">
<input type="text" class="form-control" placeholder="Search" name="search">
<input class="search-icon" type="image" src="Assets/search.svg" alt="Submit" width="20px" height="20px">
</form>
.form-control {
padding: 20px 60px;
}
^CSS
It is happening because of padding within the input field. Try this:
input[type="text"]{
padding-left:5px;
}
UPDATE: After you have updated your question. Below code will also work fine. But above CSS is a generic one.
.form-control {
padding: 20px 5px;
}
I have this registration form I am setting up and I've set the page's background to grey. I want the area in the center, where you're supposed to fill in the info, to be white. How should I do this?
I've included a picture of how the site looks now, the white part should cover the text and all the boxes.
My css code for background:
body{
background-color:#D2D7D3;
background-size:1500px 1000px;
z-index:0
position:absolute;
}
This is something you could do, wrap your form contents in a div and style the div around it.
This will create the white part you want behind the form.
Example Form
<div class="form-container">
<form>
<label for="email"> Email </label>
<input type="text" name="email"></input>
<label for="password"> Password </label>
<input type="text" name="password"></input>
<button type="submit"> Register </button>
</form>
</div>
In your CSS
.form-container {
width: 300px;
height: 300px;
background-color: #fff;
}
I'm working on a website the designer placed some extra text in a input form
my code:
<form id="hmail">
<input autocapitalize="off" autocorrect="off" autocomplete="on" type="text" name="register" id="getemail" value="your company" onFocus="if(this.value==this.defaultValue)this.value='';" onBlur="if(this.value=='')this.value=this.defaultValue;"/>
<input type="submit" id="sendmail" value="Claim">
</form>
i was thinking some thing like value="...dock.com" and float right ?
only i cant seem to get this working
Implement "dock.com" as a background image via CSS; something like:
background-image:url(dockimage.png);
background-repeat:no-repeat;
background-position:right;
Set the background image to the text like so:
input[name=theName] {
background: #fff url(path/to/bg.jpg) no-repeat right center;
}
And set a max-length on the input to prevent the input's text going over the background.
I have a text form in which the user should enter an email address. I would like this text form to have an image as a background.
Here's what I have so far:
HTML:
<form action="addemailtodatabase.php" method="post">
<input class="emailinput" type="text" name="email" maxlength="80"/>
<input type="submit" name="submit" value="Sign Up"/>
<input type="hidden" name="submitted" value="TRUE"/>
</form>
CSS:
.emailinput{
background-image:url(images/desktop/field-normal.png);
background-repeat:no-repeat;
border:none;
width:296px;
height:62px;
}
I can't get rid of the white background behind the image (it's not the image file, that has rounded corners and no white bits).
Here's what it looks like:
Any suggestions? Thanks.
Since you are not using a resetting or default style clearing stylesheet you'll need to set the background-color property as well. You can set it to transparent.
Your CSS will be like this:
.emailinput{
background-image: #000 url(images/desktop/field-normal.png) no-repeat;
border:none;
outline:none;
width:296px;
height:62px;
}
I am having trouble pushing down, margin and top do not seem to work. and aligning my form. I would like the form (label -> input box) to be below the login text which is the background.
I currently have:
HTML:
<div class="column-right-login">
<form action="http://www.domain.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
<label for="email">Email Address: </label><input type="text" name="email" value="" />
<label for="password">Password: </label><input type="password" name="password" value="" />
<br />
Forgotten Password<br />
<br />
<a onclick="$('#login').submit();" class="button"><span>Login</span></a>
</form>
<script type="text/javascript"><!--
$('#login input').keydown(function(e) {
if (e.keyCode == 13) {
$('#login').submit();
}
});
//--></script>
</div>
CSS:
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
}
Example:
Update:
I now have the code below but I cannot get my form to align:
HTML:
<div class="column-right-login">
<form action="http://www.domain.co.nz/login" method="post" enctype="multipart/form-data" id="homeLogin">
<label for="email">Email Address: </label><input type="text" name="email" value="" />
<label for="password">Password: </label><input type="password" name="password" value="" />
Forgotten Password
<a onclick="$('#login').submit();" class="button"><span>Login</span></a>
</form>
<script type="text/javascript"><!--
$('#login input').keydown(function(e) {
if (e.keyCode == 13) {
$('#login').submit();
}
});
//--></script>
</div>
CSS:
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 30px 0px 0px 10px; /* top right bottom left */
}
Example:
You probably want to use padding:
.column-right-login{
background:url('../image/login.png') no-repeat;
width:335px;
height:154px;
padding: 80px 0px 0px 50px; /* top right bottom left */
}
Please be aware that padding adds to height/width, so you will have to adjust them (abstract from current value number of px you use for padding, for example in my example width = 335 - 50 and height = 154 - 80)
If you want to use margin on form and it is not working, just add
display: block;
to the css for the form. I do not remember whether it is default or not - 4AM :)
UPDATE:
to put your inputs where you want, I would suggest wrapping label and input into divs. Then you can adjust position by using margin.
<div style="margin-left: 40px;"><label1 ...><input ...></div>
<div><label2 ...><input ...></div>
of course put styles to CSS :) hope this will work for you.
Hard to tell but it looks like your background-image needs to be positioned.
Try adding something like this to your css:
.column-right-login{
background:url('../image/login.png') no-repeat;
background-position: 0% 20%; //HERE
width:335px;
height:154px;
}
This keeps the image to the left -- the first 0% -- and bumps it down 20%.
Obviously, you can adjust the numbers.