In other words, are the following equivalent?
<input type="text" autocomplete="off" spellcheck="false" />
<style>
input[type="text"] {
-webkit-text-security: disc;
text-security: disc;
}
</style>
and
<input type="password" />
No they are not
<input type="password" /> is compatible on all browsers of all versions, while the other is not.
But technically the output result is the same on modern browsers that support even one css property of it.
Related
I have a form with this code:
<div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div>
<div id="first-element" class="f-element"><input type="tel" class='rounder' size="5" name="zipcode" id="zipcode" placeholder="Your Zip code" value="" tabindex="2" pattern="[0-9]{5}" title="Five digit zipcode" required></div>
I want to hide the label part (I don't want to delete it), so I tried using style="display:none", but for some reason it also hides the placeholder of the field.
Any way to resolve this?
Hiding the label with display:none; should not effect the placeholder of the input:
label[for="zipcode"] {
display:none;
}
<div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div>
<div id="first-element" class="f-element"><input type="tel" class='rounder' size="5" name="zipcode" id="zipcode" placeholder="Your Zip code" value="" tabindex="2" pattern="[0-9]{5}" title="Five digit zipcode" required></div>
Try with this
.f-label label{display:none}
#zipcode-label {
display: none;
}
works for me in JSFiddle, but I don't have your internal or external stylesheets so that may be a huge part of the equation
I have a form field box with class CCPPDisplayTD.
I'm trying to make it's length longer with CSS styling.
How do I use CSS to accomplish this?
<form>
<input type="text" /><br />
<input type="text" class="CCPPDisplayTD" />
</form>
.CCPPDisplayTD{
width: 200px;
}
See here: http://jsfiddle.net/GT8jD/
In your stylehseet you need the following:
.CCPPDisplayTD{
width: 250px; // whatever size you need.
}
Your HTML needs to resemble something similar to:
<form>
<label> /* Label elements are required for better accessibility */
<input type="text" class="CCPPDisplayTD" />
</label>
</form>
Or the following:
<form>
<label for="input-name"> /* Label elements are required for better accessibility */
<input type="text" class="CCPPDisplayTD" id="input-name" name="input-name" />
</label>
</form>
I face some layout differences in IE and in Chrome. I have searched Stack overflow high and low for solutions and tried some of it... I tried setting box-sizing to initial...it did not work...there fore tried setting height of the text box it did work but still a big differences. I also tried changing doctype to strict. I encounter this problem as part of my project.
The Problem:
I have form in a div tag. In the form there are 4 rows of text field. I put the preview on IE and the preview on Chrome side by side to compare and realise that it is the spacing between the text area that causes the differences in height.
The Code on my html file:
<div class="leftdetails">
<form class="form2" name="form2" method="post" action="">
<label for="fname">First Name: </label>
<input type="text" name="fname" id="fname" class="regfields"/>
<br />
<label for="cdsid">CDSID: </label>
<input type="text" name="cdsid" id="cdsid" class="regfields"/>
<br />
<label for="mail">Mail Drop: </label>
<input type="text" name="mail" id="mail" class="regfields"/>
<br />
<label for="dateofbirth">D.O.B.: </label>
<input type="text" name="dateofbirth" id="dateofbirth" class="regfields"/>
<br />
</form>
</div>
The code on my CSS (external)
.leftdetails
{
font-family:Myriad Pro;
font-size:18px;
float:left;
width:50%;
text-align:center;
}
.regfields
{
width:200px;
height:20px;
vertical-align:bottom;
}
.form2
{
text-align:right;
margin-right:50px;
}
This is not published online yet therefore there is not link...but I will be glad to provide screenshot. Its a very minor difference but I just want to understand why.
Try to set the padding-top and padding-bottom to 0px in the regfields CSS class. Maybe also margin-top and margin-bottom
Try using a conditional IE statement in your CSS to target only the Internet Explorer browser.
If you don't know how to do so, examples can be found here
I was wondering if it is possible to specify elements in CSS where an attribute is equal to one of two values, something like this:
input[type=text][type=password]
However this selector does not seem to work (I assume because specifying the same attribute twice is not valid), does anyone know how to do this?
You may simply list them as individual selectors:
input[type="username"],
input[type="password"] {
color: blue;
}
<form>
Username: <input type="username" name="Username" value="Username" />
Password: <input type="password" name="Password" value="Password" />
<input type="submit" value="Submit" />
</form>
One option nowadays is :is, a little cleaner and saves characters as the list of selectors increases:
<style>
input:is([type=text], [type=password]) { background-color: red }
</style>
<input type="text"> red
<input type="password"> red
<input type="email"> white
MDN has some useful examples that show where a major reduction in the number of selectors can be had using :is https://developer.mozilla.org/en-US/docs/Web/CSS/:is
I have seen forms that can do this without using <br /> etc.
Here's my form:
<form id="staff-login" name="staff-login" action="/staff/login/" method="POST">
<label for="staff-login-email">Email</label>
<input type="text" id="staff-login-email" name="email" value="" />
<label for="staff-login-address">Password</label>
<input type="password" id="staff-login-password" name="password" value="" />
<input type="submit" id="staff-login-submit" name="submit" value="Login" />
</form>
And an example of what I'm taking about:
http://img694.imageshack.us/img694/4879/43201622.gif
All the examples I can Google insert extra <div>s and mess with the code, I'm wondering if there is a way with the code I have (or if you can structure my code "better") to achieve what I need?
using css, float your label to the left. Also, make your input elements blocks with a decent margin...
label { float: left; width: 200px; }
input { margin-left: 220px; display: block; }
input.staff-login-submit { margin-left: 500px }
I've just guessed at a few numbers for the margins, so tweak as needed.
<label> and <input> are inline elements. Either you use <br /> (which is totally ok) or you specify them as block elements via CSS.
You can learn more about inline and block elements.