According to the W3 CSS spec, something like: input[type~="text password"] should select input fields whose type is set to either "text" or "password", but it doesn't work! Did I misinterpret this line?
E[foo~="warning"] Matches any E element whose "foo" attribute value is
a list of space-separated values, one of which is exactly equal to
"warning".
CSS spec source, it's the fourth from the bottom in the table.
Yep, you've got it round the wrong way. The selector is to search within a space seperated list.. i.e.
<element attribute="text password" />
you could find using:
element[attribute~="text"]
The benefit of this is that it shouldn't match:
<element attribute="textual password" />
To achieve what you're actually trying to do is a bit more verbose:
input[type="text"], input[type="password"]
Just follow this:
html:
<div class="contact-form">
<label for="">Name</label>
<input type="text">
<label for="">Email</label>
<input type="email">
<label for="">Subject</label>
<input type="text">
<label for="">Message</label>
<textarea></textarea>
<input type="submit" value="Send">
</div>
css:
.contact-form input[type="text"], input[type="email"]{
width:100%;
box-sizing:border-box;
border:1px solid black;
padding:5px;
}
.contact-form input[type="submit"]{
display:block;
color:black;
background-color:white;
border:1px solid black;
border-radius:10px;
margin-top:10px;
padding:10px;
cursor:pointer;
margin:auto;
margin-top:20px;
}
I hope you understand it.
You are reading it wrong. E[foo~="warning"] will select any element that has warning it a space separated list. Like this: <el foo="test warning etc" />
I tried input{property: ....} and it worked.
For example input{border: 3px solid red;}
Related
Here is the code:
input[type=text] {display:none}
<input type="text" />
It would hide the whole input element.
Is there a way to keep the input element's out frame UI and just only hide its content without setting its value to "" by js.
Make the color transparent.
.value-hidden { color: transparent }
.value-hidden::selection { color:transparent; }
<input class="value-hidden" value="the hidden message">
This will work if your input value is not excessively long:
.value-hidden { text-indent: -99em; }
<input class="value-hidden" value="the hidden message">
Simply font-size:0 but you need to make sure to apply a width/height to the input.
input[type=text] {
font-size:0;
min-width:200px;
min-height:30px;
}
<input type="text" value="hello world">
My Code Looks something like this:
input{
...
}
label{
...
}
<div class="textfield 1">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield 2">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield 3">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
now i want to apply the css only on one of the textfields and because the code is way to long to ad a ".textfield1" to every css element i want to ask if i can create a "parent class element" like:
.textfield1{
input{
...
}
label{
...
}
}
.textfield2{
input{
...
}
label{
...
}
}
It's like putting the styled elements in a Folder.
Is there a way to do that?
Thanks a lot in advance!
You can use:
.textfield1 input {
...
}
.textfield1 label {
...
}
Check this link for more CSS selectors combinations: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
As Turnip mentions in comments, you cannot have spaces in classnames. So instead of having class names such as textfield 1, you could have them like textfield1 - or something else. For the time being, I am using textfield1 to demonstrate the solution.
Now, you could use the descendant selector .textfield1 input (notice the space between the class name and tag name) or the child selector .textfield2 > input (notice the arrow > between the class name and tag name) to specify that given CSS rule must apply only to the descendants or children of given class.
input{
border: 2px solid blue;
}
label{
color: blue;
}
.textfield1 input {
border: 2px solid red;
}
.textfield2 > input {
border: 2px solid yellow;
}
<div class="textfield1">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield2">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
<div class="textfield3">
<input tpye="text" id="fullname">
<label for="fullname">Name</label>
</div>
If you use preprocessor like Sass or Less, you can nasted css like your example. It's not possible in the classical way.
In css:
.textfield2 input{
...
}
.textfield1 input{
...
}
.textfield1 label, //<- if the label style of textfield1 and textefield2 are same
.textfield2 label{
...
}
Be careful, in your HTML you have a space between textfield and the number <div class="textfield 3">. That's mean your div has the CSS class textfield and the CSS class 3.
If you just want one class remove the space and the code above works.
If you keep the space, just modify .textfield2 to .textfield.2 with a dot between textfield and the number (to indicate that the style it's for the class textfield with the class 2)
Is it possible in an HTML form to mark several input elements as readonly or disabled by wrapping them with something?
I know you can set the form itself as disabled for example, but that of course disabled the whole form. I'm thinking something like:
<form>
<input name="not-readonly">
<div readonly="readonly">
<input name="readonly-field-1">
<input name="readonly-field-2">
</div>
<input type="submit">
</form>
Or could this be solved with CSS somehow? Or maybe only with Javascript?
Just found out that you can disable a group of form elements using the fieldset tag. However, it seems to be slightly buggy in certain versions of IE. There also is no support for the readonly attribute, which unfortunately was the one I needed in this case... maybe it'll be added later?
<form>
<input name="not-disabled">
<fieldset disabled>
<input name="disabled-field-1">
<input name="disabled-field-2">
</fieldset>
<input type="submit">
</form>
I'm assuming you know how to disable inputs in the regular way based on the fact that you have 34k rep.
<input disabled="disabled" type="text" name="something"/>
Easily done with jquery of course (example based on your markup)
$('div[readonly="readonly"]').find('input').attr('disabled','disabled');
You can't actually disable an input with css, but you can fake a disabled input with css like:
.fakeinput {
padding: 4px;
font-family: monospace;
font-size: .8em;
color: #aaa;
border: #999 1px solid;
background: fff;
border-radius: 1px;
margin: 5px 0;
box-shadow: inset 1px 1px 2px #ddd;
}
<p class="fakeinput">Pretend Value</p>
javascript
document.getElementById("myText").disabled = true;
CSS
<INPUT NAME="realname" VALUE="Hi There" readonly>
<INPUT NAME="realname" VALUE="Hi There" disabled>
I would like to blend a static value next to a simple text input form.
so it will look like, for example:
[static]What do you think about[/static] [user info]...[/userinfo].
i've came up with this:
<p style="display:inline;">What Is It Like To Be</p>
<div>
<input name="post_title" type="text" id="topic" class="input" size="50" maxlength="100" tabindex="1" placeholder="<?php echo $_GET["pr"];?>" style="padding-left:45px; " style="display:inline;"/>
</div>
So, I do get the static 'prefix' inlined with the input form, but i want to make the static text look 'like' it is part of the form. Like a static 'placeholder' tag.
Thanks guys :)
You could try something like this:
HTML
<label class="input-stretch">prefix_<input type="text" /></label>
CSS
.input-stretch {
border: 1px solid #222;
padding: 0.1em;
}
.input-stretch input {
border: none;
outline: none !important;
}
Basically remove the input border and outline, then add one to the label or whatever other element you want to wrap it in.
outline: none !important; may also need to be applied on active/focus states, iirc chrome gives it some nice blue outline??
DEMO
Given I have the following tags:
<div id="div-one">
<div class="div-two">some </div>
<input type="hidden" value=""/>
<div class="div-two">some </div>
<input type="hidden" value=""/>
<div class="div-two">some </div>
<input type="hidden" value=""/>
</div>
When I try to apply a style to the last "div-two" element using this css syntax:
#div-one div.div-two:last-child { border-bottom:solid 1px #999; }
It doesn't work unless I remove the hidden fields. Any suggestions as to why?
Here's a link to the jsfiddle: http://jsfiddle.net/67qYJ/1/
Using Google Chrome v12.0.742.100
It is NOT an option to place the hidden tags elsewhere
Your selector doesn't work for your current markup because the last child is an input, not a div.div-two.
Is div#div-one only going to contain those two kinds of elements? If so, you can use :last-of-type instead, which picks the last div (though regardless of its class):
#div-one div:last-of-type { border-bottom:solid 1px #999; }
However if your inner div elements have other classes besides .div-two, it will be pretty difficult to choose the last .div-two element. Your given code makes it easy because div and input are distinct element types and only the .div-two class is present.
If you can't use last-of-type like #BoltClock suggested you could just add a second class to the last .div-two in the group.
http://jsfiddle.net/watss/
<div class="div-two last">some </div>
and
#div-one > .div-two.last { border-bottom:1px solid; background:yellow; }
or better yet
#div-one > .last { border-bottom:1px solid; background:yellow; }