Is it possible to style the default HTML5 input type="number" to look something like this:
Or do I have to use additional elements for the 'arrows'? Couldn't find the CSS selectors for them.
JsFiddle
HTML:
<input class="qnt amount" name="qnt" min="1" max="100" type="number" value="1">
CSS:
input{
display:block;
margin-top:12px;
text-align:center;
width:125px;
height:30px;
outline:1px solid black;
border:none;
}
You can't. Form fields are drawn by the underliyng chrome (meaning browser/OS combination). They don't have CSS selectors.
If you like to have your style. you have to make some new element in front of the original input (or hide the input and put that new element in place). This element will work in some way with JavaScript and always updates the value of the input field.
Related
Hi,
I need an element to change when any of its child elements are focused so I tried focus-within. However, this doesnt seem to work for elements other than text inputs. Is there any alternative out there with CSS only?
Thank you.
form{ border:1px solid black;}
form:focus-within {
background-color:red;
}
div {background-color:yellow;}
<form>
<input type="text">
<div>
click here
</div>
</form>
I have a stylesheet that specifies a style for <LABEL>.
But some <LABEL>s are special: Currently I inline style them like this:
<LABEL style="text-align:right; line-height:15pt">
<div style="padding-right:20px">My Label Text</div>
</LABEL>
I suspect there's a way to specify a CSS class, perhaps called rightlabel, to render the preceding using something simple like this:
<LABEL class="rightlabel">My Label Text</LABEL>
What would the correct way be to do that? I.e., is there a way to define rightlabel in CSS to produce the overridden <LABEL> while automatically wrapping its children in a padded child container (because the style doesn't work correctly unless that is done, and it doesn't seem proper to depend on the coder to implement two elements to get the style right)?
Amendment: I can get most of the way there using a child selector – as shown in this fiddle with this CSS:
.rightLabel {text-align: right}
.rightLabel > * {padding-right: 20px}
But I can't find a way to apply the padding to the label contents without explicitly wrapping the contents in some container. I.e., the above CSS works correctly on
<LABEL class="rightLabel">
<div>This is what we wanted!</div>
</LABEL>
but not on
<LABEL class="rightLabel">Why am I not padded?</LABEL>
Is it possible to apply a style to the <LABEL> contents without explicitly coding them inside another HTML element (child)?
Define your styles like so:
<style>
.rightLabel
{
text-align:right;
}
.rightLabel div
{
padding-right:20px;
}
</style>
Update to updated question: you can't add a div using CSS, you'll need JavaScript. You can add pseudo elements using :before and :after.
Here's a fiddle https://jsfiddle.net/c3h9a2b9/1/
.rightLabel:before {
display:block;
content:' ';
width:20px;
float:right;
}
This fakes the padding by using the :before or :after pseudo element on your label. It needs a display of block (inline-block would also do) and some dimensions, the width here being 20px (the "padding" that you need) and floated in the direction you want padding....
If I understood correctly your question the answer is this CSS:
label{
//Your general label style
}
label.rightlabel{
text-align: right;
line-height: 15pt;
}
label.rightlabel div{
padding-right: 20px;
}
With this HTML should act as you wish
<label>a normal label</label>
</label class="right label"><div>the special label</div></label>
This works because more specific CSS overrides less specific one by default :)
(Basically I'm trying to style a text field beyond its normal capabilities, including filler text which doesn't interact directly with the cursor.)
I wonder if it's possible to position (using z-index if possible) a :before element behind the child elements of the container element, but in front of the container background. (Maybe you'd understand in a bit)
HTML:
<div class="field" data-title="John">
<input type="text" name="firstname">
</div>
CSS:
.field{
background-color:white;
border:1px solid gray;
}
.field:before{
content:attr(data-title);
}
input[type="text"]{
background-color:transparent;
border:none;
outline:none;
}
This displays correctly:
However, I'm concerned because you cannot focus the text field if your cursor is over the :before content (in this case, is the word "John").
I do understand that the :before can be styled with pointer-events:none, however, the "pointer-events" tag is not yet entirely cross-browser compatible.
Hopefully I made myself clear. Any help at all would be very much appreciated. Thank you for your time.
I have a readonly HTML <input> that I'd like to display just like a <span>.
However, applying the following CSS causes it to stay as inline-block in Chrome v34 on Windows.
input[readonly] {
background:none; color:inherit; /* normal colors */
border:0; margin:0; padding:0; /* no special sizing */
width:auto; display:inline; /* try to make it inline and auto-size */
}
Demo: http://jsfiddle.net/52vL3/
How can I make the input stop requiring an explicit size, using CSS?
There are a bunch of things happening here, but inline-block is not your problem. This can be shown by adding
-webkit-appearance: none
You'll now have an inline input that's still not resizing itself. The problem is that inputs don't automatically size themselves to their value, even when inline.
If it were a type="text" input, you could set size="2" (default is 20) on the input and it would resize it accordingly (albeit with a bit of extra space).
Unfortunately, type="number" ignores the size attribute.
So, you could try using a pattern instead of type="number"
<input value="64" type="text" pattern="\d*" size="2" readonly>
You may want to increase the size when you make it editable though, because the input won't automatically expand to fit wider values.
See this question for an approach to auto-sizing an input as you type.
Or, depending on how you're using it, you might like to consider <span contenteditable="true">
I have an <input> and an <input type="image"> displayed as table-cell.
I cannot figure out why the image is on a new line in WebKit-powered browsers.
This is my HTML:
<div id="search">
<div id="search_input_wrapper">
<input type="text" name="Search" id="search_input" />
<input type="image" name="Submit" id="search_submit" alt="Search" />
</div>
</div>
And this is my CSS:
div#search {
display:table;
width:100%;
table-layout:fixed;
}
div#search_input_wrapper {
display:table-row;
}
input {
display:table-cell;
margin:0;
padding:0;
border:0;
}
And here's a jsFiddle
This is an interesting problem that only pertains to -webkit browsers.
If you take a look at this (example), you will clearly see the problem. An input element with the property display:table-cell should normally appear on the same line, as inline elements do. You will notice that this is true if type="submit". However, if type="image", then the input elements act as block level elements, appearing on a new line.
The root of the problem lies with the property -webkit-appearance. If you were to apply -webkit-appearance:none to both input elements, you will notice they now both act the same! (example)
The default property of an input element with type="submit" is -webkit-appearance:push-button therefore we can solve the problem by applying the same property to the type="image" elements, as they normally have the property -webkit-appearance:none by default.
Problem solved, (example).
input[type="image"] {
-webkit-appearance:push-button;
}
Here is an updated example, fixing your initial problem.
I also added a src to input[type="image"], as that is the purpose of type="image".
Again, all these pertains to -webkit browsers, if you are using IE, FF or Opera, none of these example will mean anything to you, as they don't demonstrate the issue.