I have a checkbox input control and I have a CSS file which includes the following declaration:
input[type="checkbox"] {
display:none;
}
I want this CSS to be be applied to any checkbox input element except one. How can I ignore this CSS rule(display:none;) on one of my controls?
All you need to do is target that specific checkbox and give it a display of initial.
You haven't provided any HTML so I'm going to have to make up a generic example:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"].bar {
display: initial;
}
<input type="checkbox" class="foo" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="baz" />
You can simply do something like:
input[type="checkbox"]:not(.this_one) {
display: none;
}
Note: Replace this_one with the ID or class of the one you want to exempt(leave out)
See working example here
As you can see by the other solutions, there are many ways to accomplish what you want. Another way is to use the "cascading" aspect of cascading style sheets by overriding the style within the element:
input[type="checkbox"] {
display: none;
}
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" style="display:initial" />
Just use a class to add this css property (and possibly others) and omit the class for the needed element
input[type="checkbox"].yourClass
{
display:none;
}
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike"> The one without the class
Related
I have a drop down that contains options. I would like to partially break & bold some text as well as insert context breaks. I tried using CSS as well as HTML tags but I'm unable to get it. Can someone please suggest a solution?
Thanks in advance
I know this question is a bit old (or not new at least), but I'd like to show a very simple way to emulate a select element rather than using a "replacement plugin" as suggested in How to style the option of a html “select”?.
There are probably many, MANY ways to do this, but I try to keep things extremely simple, so my method of emulation only uses CSS. It is rather bare bones, but I'd like to point out that it is not a complicated thing to do so you might not need a plug in to do it.
Note1: Instead of using <option>, I used <label>. Since <label> is an interactive element, putting something interactive inside (like a <button>) would probably mess it up. Options are normally non-interactive anyway, but just be aware that this simple emulation can't do everything.
Note2: If you want to be able to select multiple options, just do a search for "radio" and replace with "checkbox".
Emulating Select Using Radio - No Collapse
input[type="radio"] {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" checked="checked" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" />
<label for="rad3">Option 3</label>
</div>
</div>
Radio select emulation - with collapse
Note: this won't work for mobile devices since it uses :hover.
input[type="radio"] {
display: none;
}
/* style this to your heart's content */
input[type="radio"] + label {
display: none;
}
input[type="radio"]:checked + label {
background-color: black;
color: #28AADC;
display: inline-block;
}
.radio_select:hover label {
display: inline-block;
}
/* none functional styles. just regular styling */
.radio_select {
background-color: #28AADC;
display: inline-block;
}
<!-- NOTE: This technique uses hover, so it won't work for mobile devices.
I couldn't think of a pure CSS way to solve that. Sorry. -->
<div class="radio_select">
<div>
<input id="rad1" type="radio" name="radio_select" />
<label for="rad1">Option 1</label>
</div>
<div>
<input id="rad2" type="radio" name="radio_select" />
<label for="rad2">Option 2</label>
</div>
<div>
<input id="rad3" type="radio" name="radio_select" checked="checked" />
<label for="rad3">Option 3</label>
</div>
</div>
In my whole application i have globally declared textbox style as in css
input[type='text'], input[type=password], textarea { //My styles }
I need to remove this style from search textbox
<input id="txtSerach" type="text" placeholder="Search here..." required />
input[type='text']:not(#txtSearch), input[type=password], textarea { //My styles }
If it is HTML5 you can also use input type="search" and use different css for all search fields
<input id="txtSerach" type="search" placeholder="Search here..." required />
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.