I'm trying to reproduce the input box behavior of stackoverflow where they place span text over an input box. It looks like the text is actually inside the input box, but is actually just a finely positioned span. They hide the span when the user types text into the field. To see the behavior in action, press "Ask Question" and then look at the "Title" input box. The text says: "what's your programming question? be specific".
I'm creating this for an ecommerce checkout page, so there will be multiple input boxes of different widths and positions.
As a CSS newbie, is there a way to create input boxes and then somehow attach a span to the left and vertical center of a input field? I suppose I could go through and position each one individually, so I'm hoping a class could be developed that would automatically attach a span to a previously defined input box. Does anyone have an elegant way to do this without custom positioning each one?
I just did this with a jQuery plugin.
I used JavaScript to automate this, but the same rules apply.
If you look closely, its not the span that is positioned. There's another hidden input.
<input type="text" tabindex="100" class="actual-edit-overlay" value="" style=" background-color: white; color: black; opacity: 1; width: 610px; height: 15px; " disabled="">
<input id="title" name="title" type="text" maxlength="300" tabindex="100" class="ask-title-field edit-field-overlayed" value="" style="z-index: 1; position: relative; opacity: 0.3; ">
<span class="edit-field-overlay">what's your programming question? be specific.</span>
If you inspect with firebug and set turn off the display:none;, you will see clearly the one textbox, another textbox and a span.
Related
When I use Boostrap to create a date input field that has a limited width
<input type="date" id="my_date" name="my_date" class="form-control" style="width:80px">
the value (or the placeholder) are covered by the control icons when the field is focused; fine. But when the field is not focused, the place where the control icons are placed if focused takes white space.
Is there a workaround so that the field shows full content if not focused?
Try this code. When you hover the buttons are displayed. If the text is still hidden, try to make a smaller font, or less padding.
CSS
#my_date::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
#my_date:hover::-webkit-inner-spin-button {
display: block;
}
Example http://dabblet.com/gist/5859946
If you have a long placeholder, the input by default does not display wide enough to show all the placeholder text.
e.g.
<input placeholder="Please enter your name, address and shoe size">
Without setting a fixed width, and preferably no javascript, can you set the input to show all the placeholder text?
This can be done only via javascript by setting the size = placeholder length:
input.setAttribute('size',input.getAttribute('placeholder').length);
Here is a code that dose that for all the inputs:
http://jsfiddle.net/KU5kN/
Just in case someone wants to use this with jQuery, that code would be below. Also, if the placeholder attribute doesn't exist in the accepted answer, you'll get errors, which is taken care of as well in the jQuery example below.
$("input[placeholder]").each(function () {
$(this).attr('size', $(this).attr('placeholder').length);
});
I went with Avner Solomon's solution, as proposed in the comments of one of the above sections.
You need a div element wrapping an input and another div element that contains your label:
<div class="input-container">
<!-- this element is hidden from display and screen readers. -->
<div class="input-hidden-label"
aria-hidden="true">
Your placeholder text
</div>
<input class="input"
type="text"
placeholder="Your placeholder text"/>
</div>
Assuming the font styles for the input-hidden-label and the input are the same, you will see a line of text alongside the input. The text will be the same length as the input, give or take a few pixels.
You can then apply these styles:
.input-container {
display: inline-block;
margin-bottom: 2em;
}
.input {
display: inline;
width: 100%;
font-size: 16px;
font-family: Times;
}
.input-hidden-label {
height: 0;
visibility: hidden;
}
This hides the label by giving it height: 0, and removing visibility. But, the width remains. The div that contains the input and the label matches the width of its longest child. If you then set the input to width: 100%, it will match the parent width, which already matches the placeholder.
See this fiddle.
Caveats
This idea is not very accessible, nor is this solution. You should include a label for the input, and not rely on the placeholder itself as a label.
A workaround i thought of:
Make a span element with the same text as placeholder.
Measure width of the span element.
Set input to the width of the span element.
hide span element. display none will not work, use other method.
http://jsfiddle.net/Timar/cwLp3rbo/
var input = document.getElementById('input-1');
// measure width of same text as placeholder
var placeholder = document.getElementById('input-1-placeholder');
input.style.width = placeholder.offsetWidth + "px"
I'm in the midst of the HTML5/CSS/JavaScript learning curve and have hit a wall.
My goal is to create a form. In the process of executing this seemingly simple task, I've created a confusing monstrosity that displays perfectly in Firefox and IE, but appears as a jumbled mess in Chrome and Safari. I've written some sample code that illustrates my problem. Consider this three line form that has two text fields for username and password, and a checkbox to indicate whether or not the theme from 'Sanford and Son' should play during the user's session.
<!DOCTYPE HTML>
<html>
<head>
<style>
form label{
float: left;
clear: left;
text-align: right;
margin-right: 10px;
width: 110px;
}
form input{
display: block;
margin-bottom: 5px;
padding: 0px .2em;
outline: none;
}
</style>
</head>
<body>
<form id="loginPopup">
<fieldset>
<label for="username">Username:</label>
<input type="text" id="username" name="username"/>
<label for="password">Password:</label>
<input type="password" id="password" name="password"/>
<label for="sanford">Sanford Theme:</label>
<input type="checkbox" id="sanford" name="sanford"/>
</fieldset>
</form>
</body>
</html>
Try viewing it in IE or Firefox and everything looks perfect. Now try viewing it in Chrome or Safari. The 'sanford' checkbox appears underneath its label. Not good. The checkbox is obviously supposed to appear to the right of the label. What's even more perplexing is that if I replace the checkbox with some other input (e.g. text, radio, etc.), everything appears properly in all browsers. This problem seems limited to the checkbox.
I can't wrap my head around what's going on here. The 'Sanford' label is floated to the left so presumably the checkbox should flow to the immediate right of that label -- and in fact that's exactly what happens in Firefox/IE… so why not in Chrome/Safari?
Any help would be greatly appreciated.
EDIT: I posted the code to the Fiddle site as requested: http://jsfiddle.net/ChadDecker/FyNZw/
Float is tricky. If one element is floated, the others have to be floated or it will be all screwed up. So you must float every element and adjust with padding/margin as necessary. What you may want to try also is using:
position: absolute;
and also using z-index which tells the page what items to display over top of the other:
z-index: 0;
EDIT
Your form on JSFiddle: It's all designed wrong in my opinion. You shouldn't be using form.input because since the checkbox field is considered a form of input, hence <input then it gets the properties from form.input style. I made a simple class to show you called box:
http://jsfiddle.net/FyNZw/2/
I have text box and what happens is that the user will click on a button and a string will be generated and displayed in the text box. I need to use a text box as that I can use the "name" attribute for posting, but I do not really need the box, so what I really want to know is how in css can I not display the box? I won't be able to use hidden because then user won't be able to see the text.
Thank you
You can remove the border and make the background color of the textbox transparent (or to whatever color your page is).
#textBox
{
border: none;
background-color: transparent;
}
<input name="example" style="border: none;">
and if you want to use simple span instead of input box:
<span id="example"> </span>
and JS code to change its contents:
document.getElementById('example').innerHTML = 'test';
I'm using submit controls in my web page
<input type="submit" name="BtnSearch" value="Search" id="btnSearch" title="Search" />
Even when I turn off CSS I get a big gap before the start and after the end of the text of my button. My buttons are also bigger than I want. Is there a way to style buttons in IE6 and 7 to make them more compact?
Set overflow to visible:
input {
overflow: visible;
}
And then set the padding to whatever you want it to be.
Most of the browser-specific styling is done with the border--set border-width to 0 if you want a plain square button.
You could try to style like so:
input [type="submit"] {
padding: 0;
border: 0;
}
or simply add a class to your button and add style rules for that class.