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;
}
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 form like this:
<form action="login_form.php" method="POST" id="login_form">
Email <input name="email" type="text" size="25" placeholder="type your email"/>
Password <input name="password" type="text" size="25" placeholder="type your password" />
<input type="submit" class="btn" value="" name="submit" />
</form>
and for submit button I use an image that is in my CSS:
.btnew{
background:url('img/login_button_1_1.jpg') no-repeat; width:270px; height:46px; border:none; cursor: pointer;
}
.btnew:hover{
background:url('img/login_button_1_1_light.jpg') no-repeat; width:270px; height:46px; border:none; cursor: pointer;
}
When page loading my form has as a submit button, the "login_button_1_1.jpg". When the user place mouse over the submit button, button changes to "login_button_1_1_light.jpg" successfully acording to my CSS. My problem is that the first time that the user places mouse over submit button, there is a very small delay until the image "login_button_1_1_light.jpg" appears. looks like it is not loaded with the page at the begining. Any idea how to fix this?
You can place hover image inside body tag to preload it.
<img src="img/login_button_1_1_light.jpg" style="display:none;" />
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.