Is there a way to hide/disable control options for date and time input's types that allow increment/decrement values by clicking on arrows.
<input type='date' />
<input type='time' />
And at the same time have the possibility to provide data for each segment like dd from dd/mm/yyyy (basicly just hide the controls)
Like for example it's possible to set resize: none for textarea.
textarea {
resize: none;
width: 200px;
height: 100px;
}
<textarea />
You can set the input to disabled, or use a <input type="text" /> if those spinners are getting in your way
EDIT
I googled a little and it turns out it can be done on webkit browsers...
https://css-tricks.com/snippets/css/turn-off-number-input-spinners/
input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-outer-spin-button,
input[type=time]::-webkit-inner-spin-button,
input[type=time]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}
<input type='date' />
<input type='time' />
At this stage, the short answer is that you can’t. The date and time elements aren’t widely supported yet, and any tweaking is, at this stage, still experimental.
There are good reasons to prefer the date and time types over the text type, but you won’t be able to control their appearance on all browsers reliably.
Chrome has some experimental styles: you can read about that at https://www.tjvantoll.com/2013/04/15/list-of-pseudo-elements-to-style-form-controls/. the ::-webkit-inner-spin-button property may help.
Just remember that, at this stage, it is by no means universal.
Related
I'd like to know, if there is any way to replace the default button of <b:commandButton> with a <b:iconAwesome>.
However, it does work with a <h:commandLink>, perfectly.
<h:commandLink>
<b:iconAwesome name="arrow-down"></b:iconAwesome>
</h:commandLink>
And with replacing, I mean fully replaced and not, that the icon is on the button. Just check the working code above.
Are there other hints to be mentioned?
(Note: <b:...> is a component of BootsFaces.)
Two answers:
To show an icon within a commandButton, just add the iconAwesome attribute:
<b:commandButton value="" ajax="true" update="form:inform infoshow"
iconAwesome="thumbs-up" look="info" />
If you want to display the image instead of the button, while keeping the button functionality, add a couple of inline styles (also see here):
<b:commandButton value="" ajax="true" update="form:inform infoshow"
iconAwesome="thumbs-up" look="info"
style="padding: 0; border: none; background: none;color: #000" />
If you need more flexibility: we're already working on it. BootsFaces 0.8 is going to allow you to nest arbitrary HTML within the <b:commandButton />, exactly the way you did in your <b:commandLink /> example. You can watch the progress on our bug tracker: https://github.com/TheCoder4eu/BootsFaces-OSP/issues/65
I'm using normalize.css on a little project I'm working on in Wordpress,but when I use a contact form, normalize is causing the text fields to span outside of the container:
http://notfilc.eu/wordpress/
The offending code is:
button, input, select, textarea {
font-family: inherit;
font-size: 100%;
margin: 0;
}
I could just remove this from normalize but I want to learn why it's going out, and I just can't see it. The HTML is pretty large so a reduced test case is pretty hard to achieve, however I'm willing to produce this afterwards for others to learn from if there's a reasonable answer for this.
It is because you are using size=40
<input type="text" name="your-name" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" />
and hence it is overflowing.. My Fiddle
Try using size="30" or less and it will decrease..
If you want to limit the characters in the field use maxlength
As shown here: http://msdn.microsoft.com/library/windows/apps/Hh465498
Do Mozilla and Webkit have equivalent options? The clear button on text inputs is good for touch screen apps. I don't want any JavaScript workarounds and an easy CSS fix would be very helpful.
I already know this is possible with JavaScript, but IE 10 has an inbuilt solution for displaying clear button, and I'm wondering if any other browsers have similar options?
The short answer is No.
There is no way to use CSS to generate a button that will clear the contents of an input without the use of JavaScript.
The clear button is built in functionality to IE10. -ms-clear is not what generates it, but simply a way to target it for styling.
I should mention though, that the <input type=search> field in Chrome will give you a clear button as well, but not on normal <input type=text> fields.
Was looking for same issue so I made a jQuery plugin (TextClear) to offer the same feature :
here is the download link
and about trick behind this:
set background image on input text field and position it to the right corner like
{
background-image: url('imagesUrl');
background-repeat: no-repeat;
background-position: right center;
background-size: 10% 90%;
padding-right: 1%;
}
And then handling click event on it by mapping its position (you can check the source code as well for detailed logic)
You cannot actually do this using css..
But you can user jQuery, and its simple. All you gotto do is this...
HTML code:
<form id="myform" method="post">
<input type.... />
<input type.... />
<input type.... />
<input type="button" id="clear" name="clear" />
</form>
jQuery Code:
$("#clear").click(function(){
$("#myform").reset();
});
And this will work.. But the form tag is necessary.
Y U NO like Javascript? Look how easy jQuery makes this process:
Markup
<form>
<input type="text">
<button>X</button>
</form>
jQuery
$("form").on("click", "button", function() {
$("input").val("");
return false;
});
http://jsfiddle.net/QyE92/
With CSS, you can style the button and position it appropriately to mimic the "x" in the metro interface almost exactly.
Given these HTML inputs of differing types:
<input type="text" id="username" />
<input type="email" id="emailaddress" />
<input type="date" id="birthday" />
<input type="password" id="pword" />
<input type="search" id="q" />
Is it possible to apply CSS styles to all text boxes without having to either add a class to each or selecting them like this:
input[type="text"],
input[type="email"],
input[type="date"],
input[type="password"],
input[type="search"]
...
Also I don't want to use input { } as that would select radio buttons etc. when I only want to style are the text boxes.
Either
input {...}
input[type="radio"] { (undo changes here) }
or
input:not([type="radio"]) {...}
While the later may look more straightforward, take note that not all browsers support the not syntax yet.
I don't think this is possible. For instance, it's up to the browser to decide how an input is rendered. There's no way to query how the browser has rendered a control (as far as I know).
For example, some browsers will render a 'range' input as as textbox rather than a slider. Also some browsers render the 'search' control differently to other text boxes (rounded corners etc), so your CSS may not work as you expect anyway.
I think you'll have to go for the input[type="text"], input=[type="password"] { } rules as you described.
I'm looking for some examples of stylish web forms that can be used on any site. I've googled for "stylish web forms", but most of the examples I find are of very ornate forms that use a lots of images, which are unlikely to look good on other sites that use different color schemes. I've also found lots of examples of using CSS to layout forms, but they usually don't apply any styling to the forms to make them look good.
What I'm looking for is something in between:
Properly laid out, e.g. labels and inputs aligned (I have no opinion on the whole "label on top or alongside" debate)
Nicely styled, but without using images so colors can be easily changed
Semantically valid markup, e.g. no tables or JavaScript, though I'm not fundamentalist about this (a few extra divs is OK)
A response that points to a single example is a lot more useful than "here's a page with a million example forms, most of which don't meet your requirements".
I realize I'm being very demanding here, so apologies and thanks!
Here are a few good sites, with self explanatory examples and usage.
http://designshack.co.uk/articles/10-css-form-examples
http://www.smashingmagazine.com/.../
http://jeffhowden.com/code/css/forms/
http://24ways.org/2006/showing-good-form
There are billions more online, tutorials, downloadable examples, stylesheets. To get your ideal solution you might have to mash them together.
See Prettier Accessible Forms.
However, as noted in Styling form controls with CSS, revisited, you are going to have a lot of variation in appearance across browsers and operating systems.
These articles will show you how to build visually pleasing forms, instead of giving you a catalog of a bunch of ready made templates.
I'm not sure if this is as comprehensive as what you're asking for, but I like going with something simple like this:
<fieldset>
<legend>New customer? Provide the following</legend>
<label for="FirstName">First Name:</label>
<input type="text" ID="FirstName" name="FirstName" />
<label for="LastName">Last Name:</label>
<input type="text" ID="LastName" name="LastName" />
<label for="Address">Address:</label>
<input type="text" ID="Address" name="Address" />
<label for="City">City:</label>
<input type="text" ID="City" name="City" />
<label for="State">State:</label>
<input type="text" ID="State" name="State" />
<label for="Zip">Zip:</label>
<input type="text" ID="Zip" name="Zip" />
<input type="submit" Text="Submit Order" />
</fieldset>
Using CSS like this:
fieldset {
overflow: hidden;
}
label {
clear: both;
float: left;
margin-top: 10px;
width: 125px;
/* If you want the labels flush along the right edge */
padding-right: 5px;
text-align: right;
}
input {
float: left;
margin-top: 10px;
}
/* Align the submit button under the fields */
input[type=submit] {
clear: both;
float: left;
margin-left: 135px;
margin-top: 10px;
}
That produces the layout shown in the image early in this (completely unrelated) post. There's a source download with the markup and CSS there too, if you don't mind ASP.NET.
Speaking to reuse, I've found that basic structure to be flexible enough to use anywhere. For example, we used basically the same markup and CSS for this more customized contact form: http://www.thirtyfiveatlanta.com/meet/
I really like Wufoo's forms : http://wufoo.com/examples/
I've copied and used their HTML and CSS for my own projects with good results.
Uni-Form
This response was posted as a comment by Darmen, but I feel it's sufficiently useful that it deserves to be promoted to a reply
http://www.rockettheme.com/ has some pretty good templates and themes. They are generally for existing CMS systems but you could adapt them or parts of them for your own sites.