my html:
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
my inputfield css:
width:95%;
z-index:3;
my label css:
position:absolute;
display:block;
top:8px;
left:11px;
color:#CCCCCC;
z-index:1;
when i try to click on the label to enter something it wont allow me to do this... instead will show a default cursor and i will have to click next to the other space of the textfield to write something...
z-indexes are correct , arent they?
EDIT: SOLUTION
html:
<input type="text" value="" id="email1" class="input" />
<label>Email address 1</label>
<span class="input_bg"></span>
css:
input{
background:transparent;
z-index:1;
}
label{
z-index:2;
}
.input_bg{
/*input css with background*/
z-index:3;
}
I'm assuming this is for the purpose of a textbox watermark?
If this is the case, then I would use CSS to hide the label (don't remove it for accessibility purposes):
label
{
display:none;
}
Then use a javascript tool to display the watermarked text. There are a lot of good jQuery solutions for this:
http://code.google.com/p/jquery-watermark/
It's then a case of applying something like:
$("#email1").watermark("Email address 1");
However, this can be improved, so that you don't have to apply this for every single element by doing something like:
$(".watermark").watermark($(this).attr("title"));
Alternatively, if all your input's have associated labels, you can apply them like this:
$(".watermark").watermark($("label[for='" + $(this).attr("id") + "']").html());
This way if the user doesn't have javascript enabled, theres still the title to rely on, and if they don't have CSS, then the label will be shown.
z-index doesn't work without positioning. Try to add position:relative; to the input input CSS.
html:
<input type="text" value="" id="email1" class="input" />
<label>Email address 1</label>
<span class="input_bg"></span>
css:
input{
background:transparent;
z-index:1;
}
label{
z-index:2;
}
.input_bg{
/*input css with background*/
z-index:3;
}
Related
I wanted to create a small form with some checkboxes which are only visible when the mouse cursor hover this container.
The hover effect and the container inside are no problem.
But there are more elements after that checkboxes and when I hover every element below is moving down because the container with the checkboxes has a height. But when I say no height:auto or 100% when I hover then I can't reach more then one checkbox.
<form>
<input type="text" name="something">
<div class="cb-container">
<input type="checkbox" name="first" value="first">
<input type="checkbox" name="second" value="second">
<input type="checkbox" name="third" value="third">
</div>
<input type="submit">
</form>
<style type="text/css">
.cb-container {
height:25px;
overflow:hidden;
position:relative;
z-index:1;
}
.cb-container:hover {
display:block;
height:auto;
overflow:visible;
position:relative;
z-index:1;
}
</style>
Some opening animation would be nice, but that is another task for me.
For the first I would like to understand why I can't open the container over e.g. the submit button instead of pushing him down.
This may help you ! http://jsfiddle.net/13cjn242/
.cb-container {
height:25px;
opacity:0;
}
.cb-container:hover {
opacity:1;
}
I have successfully changed the width and height of input file tag by using different instructions available online. But when I display text on my button the <input type="file"> does not remain click-able.
This is my HTML code
<button id="fileInput">
<label><strong>Browse</strong></label>
<input type="file" value="Browse"/>
</button>
This is my CSS
#fileInput{
z-index: 9;
width: 250px;
height:40px;
overflow: hidden;
padding:0px;
margin-left:10px;
margin-top:0px;
}
#fileInput input{
margin:0px;
height:50px;
opacity:0;
z-index: 99;
width:350px;
}
#fileInput label strong{
z-index:100;
font-size:30px;
}
The button is clicked but the <input type="file"> is not clicked.
You tried to put file input into button but I think it doesn't work. So, you can change the view of input instead of adding button, like accepted answer here: How to customize <input type="file">?
Or you can do something ,which I advise , like that:
HTML
<
button id="fileInput"><label><strong>Browse</strong></label> </button>
<input type="file" id="input" style="display:none;"/>
JQUERY
<script>
$(document).ready( function() {
$('#fileInput').click(function(){
$("#input").click();
});
});
</script>
It is changed form of second answer of the question that I gave above.
The HTML
<form id="test_form">
<input type="file" id="test">
<button>Browse</button>
</form>
The CSS
input{position:absolute; top:-100px;}
The JQuery
$("button").click(function() {
$("#test").click();
})
$('#test').change(function() {
$('#test_form').submit();
});
JSFiddle: http://jsfiddle.net/yboss/WxYLA/1/
I have a form whose submit input button has a background-image and is shifted left over the top of the input field:
This works in all current browsers. My problem is that it also needs to work in IE8 on Windows XP (!), and it doesn't. When you hover over the input (the magnifying glass), the pointer does not change, and the button is not clickable. Any ideas where I'm going wrong please?
HTML:
<form id="" action="" method="post">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</form>
CSS:
#search {
width:222px;
height:36px;
padding-left:223px;
padding-right:10px;
float:left;
}
input.searchsub {
width:23px;
height:23px;
float:left;
background-image:url(../images/magnifier.jpg);
margin:8px 0 0 -32px;
border:0;
cursor:pointer;
}
This is a start: (demo: http://jsfiddle.net/KYL3A/)
I removed your floats and added a div as a "border wrapper". I think this will make IE8 play :) though I couldn't test it myself as I don't have IE8
<form id="" action="" method="post">
<div id="searchwrap">
<label for="search">Search</label>
<input type="text" id="search" name="search" value="" />
<input type="submit" name="searchsub" class="searchsub" value="" />
</div>
</form>
CSS
#searchwrap {
display: inline-block;
border: 1px solid #333;
padding: 0 10px;
}
#search {
width:150px;
height:36px;
border:0;
}
input.searchsub {
width:23px;
height:23px;
background:red url(); // added red as i dont have your image
margin:8px 0 0 0px;
cursor:pointer;
}
If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the and tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.
Therefore this would not work in the web browser you are saying (IE + XP) because that browser does not support it. There is no problem in your code. So i would say that just leave it like this, because there would not be many users of your website who are running Internet Explorer on XP but if there are many then you may want to put some text in there.
Source:
The first answer on this page and this source
For some reason I cant get CSS to work with my form? I have tried just about everything and I cant seem to find the issue? What am I doing wrong?
My HTML Structure
<div class="login-container">
<form>
<fieldset>
<label for="email">Email:</label>
<input type="text" name="email" class="input" id="email" />
<br /><br />
<label for="pword">Password:</label>
<input type="text" name="pword" id="pword" />
</fieldset>
</form>
</div>
My CSS Structure
.login-container fieldset {
padding: 1em;
}
.login-container label {
float:left;
width:25%;
margin-right:0.5em;
padding-top:0.2em;
text-align:right;
font-weight:bold;
}
.input {
background-color:#F00;
}
Remove the . in front of your input selector.
input {
background-color:#F00;
}
See also: CSS element selector vs. CSS .class selector
Seems to work just fine, please see jsfiddle.net/4FCgc/
What is not working? Maybe it is your web browser's cache... But I doubt that.
Is it possible to style an active label with just CSS using the following markup:
<label class="inputOption" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
I want to add some background styles to the label once the radio inside is selected. Prefer not to use javascript. It is for mobile so it doesn't have to work on older browsers.
For this your can use CSS :checked property for this. Write like this:
#one{
position:relative;
}
#one:checked + span{
display:inline-block;
margin-left:-20px;
padding-left:20px;
background-color: #aa2233;
}
check this http://jsfiddle.net/5TxyJ/5/
Of course, you should add also a second class, let`s say "active" to the label, only when the radio button is selected:
<style type="text/css">
label.active {
background-color: #aa2233;
}
</style>
<label class="inputOption active" for="1"><input type="radio" name="radio1" id="1" /><span class="aText">Option 1</span></label>
See here.