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.
Related
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>
I'm using Foundation 6 framework to construct my pages. I have a separate style sheet called effects.css that I use to customize text and tables and inputs and such.
I actually have to style it, because without the custom styles the input fields are huge and grotesque. Must be some scaled styles in the foundation.css that are responsible.
I made a short, thin text input field, but the text inside doesn't seem to want to vertically line up correctly. The cursor blinks up and sort of half way out of the white text area.
Here's the html:
<form name="quick-connect" id="quick-connect" method="post" action="/ajax/quick-connect-action/" onsubmit="return false;">
<span class="med-text white-text">Your name:</span><input type="text" name="name" id="name" class="small-input" />
<span class="med-text white-text">Your phone #:</span><input type="text" name="number" id="number" class="small-input" />
<input type="submit" name="submit" id="quick-connect-submit" value="Submit" />
<input type="hidden" name="page" value="LCHG" />
</form>
Here's my attempt at css'ing the input fields:
input.small-input{
width:10em;
height:1em;
line-height:1em;
font-size:.9em;
color:#000;
}
Here's what it looks like:
The blinking text cursor isn't vertically align within the text field.
It was a padding problem. I set the padding to 0 within the input style, and the text properly vertically aligns now.
input.small-input{
width:10em;
height:2em;
line-height:2em;
font-size:.8em;
color:#000;
padding:0;
}
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 have a form that should look like this one: http://jsfiddle.net/g6kQK/
but if I inspect the generated code this is what I get: http://jsfiddle.net/bxA5X/
The problem seems to be with
display: block;
float: left;
but if delete those attributes nothing changes in my form.
What is the default property for input type=text in html?
What should I set it to make it aligned with the text?
Thanks.
Remove the width from the .cardno div, and move the input element to the outside.
<label>card no</label>
<div class="cardno">04</div>
<input type="text" name="codcard" maxlength="11"/>
Updated Fiddle: http://jsfiddle.net/bxA5X/8/
Just remove diplay:block property form.usersetting input[name="codcard"]
here is what i got you the answer hope this is what you want... just see this fiddle
<form id="change_customer_data" class="usersetting" action="/">
<label>telephone</label>
<input type="text" name="tel" /><br>
<label>email</label>
<input type="text" name="email"><br>
<label>card no:</label>
04<input type="text" name="codcard" maxlength="11"/>
http://jsfiddle.net/bxA5X/8/
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;
}