I'm developing a webapp (angularjs) that requires user to input a credit card. The first 12 digits of the credit card must be invisible to user, so currently right now I'm using password inputs to achieve this.
The problem with this is that Chrome thinks that I'm really writing a password, so it gives me the option to use/change my stored credentials for this website:
So I want to know if there is a CSS way or angular plugin that I can use in order to make my text inputs looks like password for the user.
You can use HTML5 Input Type Password, like this:
.pass, .regular{
float: left;
width: 80px;
margin: 5px 0px 15px 15px;
}
<div>
<p>Credit Card:</p>
<input type="password" class="pass">
<input type="password" class="pass">
<input type="password" class="pass">
<input type="text" class="regular">
</div>
Here a link to an example.
I cannot use HTML input type password because it tries to use my credentials for the site for autofill, so I went with Nirav Parmar answer and used: -webkit-text-security: disc;
However, this only works for chrome, for all browsers you can use this plugin that creates a font based only of circles or dots.
https://github.com/noppa/text-security
Related
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.
I'm learning how to use the Ionic Framework. I like a lot of it. However, I don't care for the form layouts. I would really like to include one additional component: some help text. In other words, I would like to create a form tht looks like the following:
Label1
[TextBox with a border here]
a tidbit goes here
Label2
[TextBox with a border here]
a tidbit goes here.
[Button]
However, I can't figure out how to do this well in the Ionic Framework. All of the form layouts use a list, which adds boundaries to each piece, which I don't want. Can a CSS wizard please help me out?
Thank you!
How does this work? for you?
<label class="item item-input item-stacked-label item-divider">
Name
<input type="text" placeholder="Name">
</label>
<div class="item item-footer">
Please enter your name
</div>
To get the css the way you want, you can add this
.item{
border: none;
}
.item-footer {
font-size:11px ;
padding: 8px ;
}
.item-stacked-label input, .item-stacked-label textarea{
padding:0 ;
}
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
I'm creating a css template for form types and want to give form inputs a rounded border. This works well with type=text but doesn't work with type=file (for file upload).
What am I doing wrong?
.tempform input[type="text"] {
-moz-border-radius: 10px;
}
.tempform input[type="file"] {
-moz-border-radius: 10px;
}
<div class="tempform">
<label for="textfield">Test Text Field</label>
<input type="text" id="textfield" name="textfield"></div>
</div>
div class="tempform">
<label for="filefield">Test File Field</label>
<input type="file" name="filefield" id="filefield-0">
<input type="file" name="filefield" id="filefield-1">
</div>
Unfortunately, it's impossible to style a file upload input, besides changing the width a little bit. Browsers just don't allow any other change. If you want to style your file upload input, you'll have to use a nasty hack like placing an almost invisible file upload input on top of an image (which only works in some browsers), or a JavaScript solution like ajax-upload.
According to the first Google search result, it's rather involved. See this article on quirksmode.org for information on how to do it.
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.