I have a form:
<form action="/search" class="search-form" method="get">
<fieldset>
<input id="q" name="q" type="text" value="Enter search text here">
<input type="submit" value="search" class="search-button">
</fieldset>
</form>
With some CSS to style the button:
.search-button
{
background:url("images/search.gif") no-repeat 0 center;
text-indent: -9000px;
border:none;
display:inline-block;
width: 23px;
background-position-y: 4px;
background-position-x: 5px;
}
.search-button:hover
{
background:url("images/search.gif") no-repeat 0 center;
text-indent: -9000px;
border:none;
display:inline-block;
width: 23px;
background-position-y: 4px;
background-position-x: 5px;
opacity:.8;
}
When I hover over the button, the opacity changes as expected.
If I click the button and move the mouse pointer away, the button becomes a grey square as the next page loads.
What's going on here?
Try to add active state's style also this also:
.search-button:active {...}
#Solution Updates:
Adding :default state fix issue.
The following snippet seems to be working, so it is hard to reproduce the problem.
The rules in .search-button are inherited in .search-button:hover, so you do not need to repeat them, see below.
Note: background-position-y and background-position-x are not valid CSS properties.
See reference: http://www.w3.org/TR/css3-background/#the-background-position
.search-button {
background: url("http://placehold.it/50x25") no-repeat 0 center;
text-indent: -9000px;
border: none;
display: inline-block;
width: 23px;
}
.search-button:hover {
opacity: .8;
}
<form action="#" class="search-form" method="get">
<fieldset>
<input id="q" name="q" type="text" value="Enter search text here">
<input type="submit" value="search" class="search-button">
</fieldset>
</form>
Related
I have defined a simple form to learn about clear. I am surprised the 'Submit' button is not going to the next line. My understanding of clear:both is that there should be no floated element to the left or right of the element to which clear is applied. Given this definition, I was expecting Submit to move the last line since I have applied clear to input and label.
can someone pls explain why this is not working? Pls note my goal is to understand where my understanding is flawed and not how to bring the Submit button to the next linec
label {
color: blue;
float: left;
margin-right: 2px;
clear: left;
width: 3em;
}
input {
border: 2px black solid;
float: left;
width: 10em;
}
button {
clear: both;
margin-left: auto;
margin-right: auto;
}
<form action="#">
<fieldset>
<label>Name </label>
<input type="text" value="Enter name" />
<label>Phone </label>
<input type="text" value="Enter phone" />
<button type="button">Submit </button>
</fieldset>
</form>
9.5.2 Controlling flow next to floats: the 'clear' property
Applies to: block-level elements
Button, is by default, an inline level element, not a block level element. To make clear apply, give it display:block;
label {
color: blue;
float: left;
margin-right: 2px;
clear: left;
width: 3em;
}
input {
border: 2px black solid;
float: left;
width: 10em;
}
button {
display:block;
clear: both;
margin-left: auto;
margin-right: auto;
}
<form action="#">
<fieldset>
<label>Name </label>
<input type="text" value="Enter name"/>
<label>Phone </label>
<input type="text" value="Enter phone"/>
<button type="button">Submit </button>
</fieldset>
</form>
I have a search bar and I am trying to embed a font awesome icon, however it does not seem to be getting wrapped within the container div
Here is an image which shows where the icon currently is and I want the search icon to go
Any help will be greatly appreciated, thank you
CSS:
#import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
.searchbar{
position:relative;
}
.searchbar input { text-indent: 32px;}
.searchbar .fa-search {
position: absolute;
top: 10px;
left: 10px;
color: #4f5b66;
}
.search_field {
min-width: 270px;
width: 65%;
height:40px;
font-size: 2em;
behavior: url(js/PIE.htc);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-right: -4px;
margin-top: 10px;
float:right;
}
HTML:
<div class="searchbar">
<form method="GET" action="search.php" style= "padding: 1px; font-family: Tahoma, Geneva, sans-serif;">
<span class="fa fa-search fa-lg"></span>
<input type="text" name="search" class="search_field" value="<?php echo $_GET['search']; ?>" id="search" maxlength="20" />
<input type="hidden" name="start" value="0" />
<input type="hidden" name="limit" value="10" />
</form>
</div>
You should wrap your input on a div, position that DIV exactly where you want the text input to be, and then set the DIV to position relative. Also place your icon inside this DIV.
On another note, if you ICON is supposed to be clickable for submit purposes, dont use a span, either use a 'button' tag or an actual input-type:submit
I am making a web form which I have working and am simply trying to style it using CSS before building a site for it. I have found that after adding label tags I am getting errors when I click on another box it jumps to the First Name box, the only way to fill out the form is to use Tab.
my HTML:
<label>
<form action="Register Keys site/form.php" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Phone Number: <input type="text" name="phonenumber"><br>
Information on Key: <input type="text" name="keyinfo"><br>
Password: <input type="text" name="password"><br>
Password Hint: <input type="text" name="passwordhint"><br>
<textarea rows="5" name="message" cols="30" placeholder="Please add any additional comments here"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</label>
CSS:
label
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
input
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
textarea
{
border:0;
padding:5px;
font-size:0.7em;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 5px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 160px ;
}
input:focus
{
border:solid 1px #EEA34A;
}
The written form is not correct, 'cos the entire form is wrapped in Label
when conventionally set so
<form action="">
<div> <label for=""> </ label> </ div>
<div> <input type="text"> </ div>
</form>
Which is possible without the div
You have wrapped a form element inside a label element. That’s invalid markup and has strange effects. See #verdesrobert’s answer for adequate use of label. And you should use label that way, for reasons of functionality.
But what are now trying to do, the styling of a form as a whole, can be done simply by setting CSS properties on the form element. For example:
form
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
(To use your styling. I would not recommend setting the width and the indentation in pixels but in em units.)
This is how you should use Label tag
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br>
<input type="submit" value="Submit">
</form>
To resolve this issue you need to modify html part.
You just need to replace tag label to div. Also replace css class name label to div. By doing this you may have this issue resolved.
Regards,
Vishal Bagdai
Because of the way label tags work, if the user clicks on anything inside the label tag, it will refocus, toggling control to the form (thus putting the cursor in the first textbox).
See: http://www.w3schools.com/tags/tag_label.asp
Instead of label, you want to use a div, and give it an ID (eg. divID), then change your css to:
#divID
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
or give it a class (eg. divClass) and change your css to:
.divClass
{
float: left;
text-align: right;
margin-right: 15px;
width: 300px;
}
I'm attempting to use CSS in order to make a sumbit button containing an image. Here's the code:
HTML
<input type="submit" id="search" name="submit" alt="search" >
CSS
input#search{
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
}
This returns this submit button, but I don't want the word 'submit' or the gray square box to appear.
If anyone could suggest what the problem might be, it would be greatly appreciated.
The gray box is caused by a default border being added to the submit buttons. Whereas the submit text is the default value for the button.
HTML:
<input type="submit" id="search" name="submit" alt="search" value="">
CSS:
input#search {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}
Add value with empty string to the input:
<input type="submit" id="search" name="submit" alt="search" value="">
instead of input type="submit" you can use input type="image"
use this one line code
<input type="image" src="submit.gif" alt="Submit" width="48" height="48">
see DEMO
You can use CSS text-indent to move the text away:
input#search {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
text-indent:-999px
}
https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent
Set blank Value of the input type submit as shown below :
<input type="submit" id="search" name="submit" alt="search" value="" >
try this
input#search {
background:url(../search-icon.png) no-repeat;
width:40px;
height:40px;
text-indent:50px;
overflow:hidden;
}
<!DOCTYPE html>
<html>
<head>
<style>
input.search{
background-image:url(url.jpg);
text-indent:-9999px;
width: 100px;
height: 30px;
border:2px solid rgb(0,102,153);
}
</style>
</head>
<body>
<input type="submit" class="search" alt="search">
</body>
</html>
I find this to be the most complete solution:
#submitbutton {
background-image: url(http://paulabrown.net/search-button-png-210.png);
background-repeat: no-repeat;
height: 24px; // height of image
width: 24px; // width of image
padding: 0;
border: none; // get rid of grey border
color: transparent; // hide the text (without indenting it to hell)
background-color: transparent;
outline: none;
display: block; // Ensure block element to apply this to inline-elements
}
html: <input type ="submit" value ="" class="search-button"/>
CSS:
.search-button
{
background-image: url("/images/search.png");
background-repeat: no-repeat;
min-width: 52px;
min-height: 20px;
width:52px;
height: 20px;
border:0;
}
I have the below jsfiddle I need to know how should I increase the space for error message in span so that the entire message is displayed correctly.
JSFiddle
<form method="post" action="" id="subscribeForm" name="subscribeForm">
<fieldset>
<label>Name: </label><input type="text" class="effect" name="name" id="name" autocomplete="off" >
<span id="nameInfo">What's your name?</span>
</fieldset>
<fieldset>
<label>Email: </label><input type="text" class="effect" name="email" id="email" autocomplete="off" >
<span id="emailInfo">Valid E-mail please, you will need it to log in!</span>
</fieldset>
<div id="button">
<input type="submit" value="Subscribe" name="subscribeForm"/>
</div>
<div id="success">
<strong>Data Saved Successfully.</strong>
</div>
</form>
CSS Code
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm input.error{
background: #f8dbdb;
border-color: #e77776;
}
#subscribeForm span.error{
color: #e46c6e;
}
#subscribeForm span{
margin-left: 50px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
}
JSFiddle
Try increasing the height of the fieldset.
fieldset {
overflow:hidden;
border:0;
height:50px;
margin:3px 0;
}
JSFiddle
Increasing the width of the fieldset or the form will display the error text fully.
So try,
form {
...
width: 285px;
...
}
if you do not want to display bigger form try to set the width of fieldset alone like,
fieldset {
...
width: 270px;
...
}
Check the demo here
, i have set the width of the fieldset here, form size is not changed.