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
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
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.
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 have this HTML code :
<div class="field">
<input type="hidden" value="" name="a" id="a"> <input type="hidden" value="xxxx" name="b" id="b">
<input type="file" value="" name="file1"> <input type="file" value="" name="file2">
<input type="file" value="" name="file3"> <input type="file" value="" name="file4">
<input type="file" value="" name="file5"> <input type="file" value="" name="file6">
<input type="file" value="" name="file7"> <input type="file" value="" name="file8"> </div>
In this HTML, i want hide all input type="file" inside div class="field"except the first one.
I cannot change the HTML (adding classes).
I tried to apply a pseudoclasses and structurate selector toghether, to accomplish the task :
.field input[type='file']{
display:none;
}
.field input[type='file']::first-child{
display:block;
}
But it seems doesn't work.
Anyone could suggest me the right syntax for using pseudo classes and selector togheter in css, to solve this problem?
Pseudo-classes use only one colon, so it's :first-child, not ::first-child.
But your first input[type='file'] is not the first child, so you can't use :first-child with it anyway.
You have to switch the rules around and use a sibling selector instead to hide the subsequent file upload inputs:
.field input[type='file'] {
display:block;
}
.field input[type='file'] ~ input[type='file'] {
display:none;
}
This technique is further described here, and can be used for most other simple selectors, not just classes and attributes.
You can use this code for all values and you will hide all input type="file" inside div class="field"except the first one. try this code.
<html>
<head>
<style>
.field input[type='file']
{visibility:hidden;}
</style>
</head>
<body>
</body>
</html>
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.