I have two sets of radio buttons that I want to style differently. One is in a table the other is in a div. The parent is in the table the children the div.
So it looks like this
<td class="lblcontainer">
<input type"radio" name="advSearch[puborpost]" value="Published">
<input type"radio" name="advSearch[puborpost]" value="Posted">
<div class="calChooser">
<input type"radio" name="cal[puborpost]" value="24 Hours">
<input type"radio" name="cal[puborpost]" value="1 Week">
</div>
</td>
My css looks like this
td.lblcontainer input[type="radio"]{
*css values*
}
div.calChooser input[type="radio"]{
*css values*
}
When I open my dev tools the td.lblcontainer is being applied to the div.calChooser for all my radio buttons inside my div.
What am I missing that prevents the radio buttons in div.calChooser from bubbling up and taking the styles for td.lblcontainer?
Rules that appear later in the code override earlier rules if both have the same specificity.
I presume you got td.lblcontainer input[type="radio"] defined later in your CSS file. Either put it above, or instead do
td.lblcontainer > input[type="radio"]{
*css values*
}
div.calChooser input[type="radio"]{
*css values*
}
Note the > selector only targets first-level children, therefore won't affect the input inside your div.
.lblcontainer input {
/* Style all inputs inside .lblcontainer, if you have any shared styles */
}
.lblcontainer > input {
/* Style inputs that are direct children of .lblcontainer */
}
.calChooser input {
/* Style inputs that are children of .calChooser */
}
use !important attribute in div.calChooser like
.calChooser input[type="radio"]{
property : value!important;
}
Related
My html page structure is like this
<div id="myPage">
<div class="input-group bootstrap-touchspin">
<input id="784069" class="form-control my-class touchspin" type="text" value="0" name="784069" default-field="True" style="display: block;">
</div>
</div>
I tried to fetch this element with css like this
#myPage .input-group .bootstrap-touchspin {
}
It has to be #myPage .input-group.bootstrap-touchspin because the space indicates the next class is a child of the previous. No space means both classes belong to the same element.
Targeting the <input> element
If you want to target the actual <input> element, you should use this CSS :
#myPage .bootstrap-touchspin .touchspin {
/* properties go here */
}
The following alternatives also all target the <input> element :
#myPage .bootstrap-touchspin input.my-class {
/* properties go here */
}
#myPage .bootstrap-touchspin input {
/* properties go here */
}
#myPage input.touchspin {
/* properties go here */
}
#myPage .my-class {
/* properties go here */
}
#784069 {
/* properties go here */
}
...
Targeting the <div> element
If you want to target the <div> element surrounding the <input> element, you should use this CSS :
#myPage .bootstrap-touchspin {
/* properties go here */
}
The following alternative should also work :
#myPage .input-group {
/* properties go here */
}
Notes :
There are many ways to combine different selectors, that each have their own meaning. For an overview, take a look at the W3Schools CSS Selector Reference.
In the latter case (targeting the <div> element), you could use #myPage .input-group.bootstrap-touchspin { ... } (without the space). However, you don't really need the extra .input-group class because #myPage .bootstrap-touchspin { ... } is already pretty specific. See this article for an introduction to CSS specificity.
I'm trying to create tabs with CSS using radio buttons and the ~. My tabs work if the radio buttons are before the content containers but not when after.
I want them to be after since one of the tab buttons gets hidden and replaced with an actual button while it's selected and its really tough to do this in a generalized way if I have to take the radio buttons out of the flow.
So in essence, if I have this:
#content { visibility:hidden }
#cb:checked ~ #content { visibility:visible }
<input type="checkbox" id="cb">
<div id="content">stuff</div>
Is there a way to flip the order of the input and the div and still have it work?
No, there is no "previous sibling" (nor "parent/ancestor") combinator.
In theory, if you are willing to use flexbox, then you could use the order property to swap the display order while retaining the DOM order. Here's the general idea (not tested):
#container { display: flex; }
#content { visibility:hidden; order: 1; }
#cb { order: 2; }
#cb:checked ~ #content { visibility:visible }
<div id="container">
<input type="checkbox" id="cb">
<div id="content">stuff</div>
</div>
Normal disclaimers apply to browser support for flexbox.
By the way, the name of the "tilde thingy" is "general sibling combinator".
I know there are lot's of questions regarding this query here but none of them provide the solution for me.
HTML
<input id="tb1" type="text" class="note" />
<br>
<p class="note1"> This is not done.</p>
CSS
p.note1:before{
content: "Note:";
}
tb1.note:before{
content: "Enter your number";
}
I am trying with above code and the variation as found on the web but none seems to work for input tag. It's working for p tag.
EDIT: I can't add value attribute to input tag and manage css for the desired result. It's the limitation of the system.
EDIT2: Forget about my css, is there any way that placeholder text is possible without using placeholder attribute and just with plain css for input type="text"
:before creates a pseudo-element that is the first child of the element matched.
The selected element MUST be a container tag. An empty tag like <input> doesn't have any children element.
If you can't edit your HTML code manually, you're still able to that by using JavaScript:
document.getElementById("tb1").setAttribute("placeholder", "Enter your number");
Update
If you want to achieve this by using CSS only, you need to have a container element wrapping your <input> (or come after it).
BUT It doesn't work correctly as placeholder do. You'll not able to check the value of <input> by CSS. If you write something inside the <input>, after blur event, the generated placeholder will be displayed over the <input> again.
HTML:
<label>
<input id="tb1" type="text" class="note">
</label>
CSS:
label {
position: relative;
}
label:after {
content: 'Enter your number';
position: absolute;
left: 5px;
top: 0;
color: #bbb;
}
#tb1 {
position: relative;
}
#tb1:focus {
z-index: 10;
}
JSBin Demo
It doesn't work for the simple fact that this:
<input id="tb1" type="text" class="note"></input>
is not valid. <input /> elements are not containers. As the spec notes, endtags are forbidden (and essentially ignored by the browser): http://www.w3.org/TR/html401/interact/forms.html#h-17.4
If you cant manipulate the html and use placeholder="". Use javascript to manipulate the placeholder. Every css approach is hack-isch anyway.
E.g. with jQuery:
$('#myFieldId').attr('placeholder', 'Search for Stuff');
I have found this method but not supported by all browsers:
#tb1.note:empty:before{
content: "Enter your number";
}
Note: you have forgot to place an id selector # tb1.note
see this link
EDIT:
Try this for starters: (Note: you'll need some js to detect if text has been entered in the input)
Apart from this - I don't think this there is a css solution for placeholder text on an input element without using the placeholder attribute.
FIDDLE
Markup
<div class="container">
<input />
<div class="fakePlaceholder">Some placeholder text</div>
</div>
css
.container
{
position: relative;
}
input
{
background: transparent;
}
input:focus + .fakePlaceholder
{
display: none;
}
.fakePlaceholder
{
color:gray;
position:absolute;
top: 3px;
left: 5px;
z-index: -1;
}
You can't use pseudo elements on an input tag - or any other non-container elements for that matter
From the Pseudo-Elements tag info:
you cannot use them (pseudo elements) with replaced elements (see
below) which do not have actual content. This is because the generated
content resides within the element.
...
Replaced Elements
Any element whose appearance and/or dimensions are determined by some
external resource is considered to be a replaced element. Some
pseudo-elements cannot be applied to replaced elements because they
have no "content" or get replaced with something (such as user
interface controls). Replaced elements include images (<img>), inline
frames (<iframe>), line breaks (<br>), horizontal rules (<hr>),
plugins (<object>), form elements (<button>, <textarea>, <input>, and
<select>), videos (<video>), audio sounds (<audio>), and canvases
(<canvas>). Any other element is considered to be a non-replaced
element.
Another way this can be accomplished, and have not really seen any others give it as an option, is to instead use an anchor as a container around your input and label, and handle the removal of the label via some color trickory, the #hashtag, and the css a:visited. (jsfiddle at the bottom)
Your HTML would look like this:
<a id="Trickory" href="#OnlyHappensOnce">
<input type="text" value="" id="email1" class="inputfield_ui" />
<label>Email address 1</label>
</a>
And your CSS, something like this:
html, body {margin:0px}
a#Trickory {color: #CCC;} /* Actual Label Color */
a#Trickory:visited {color: #FFF;} /* Fake "Turn Off" Label */
a#Trickory:visited input {border-color: rgb(238, 238, 238);} /* Make Sure We Dont Mess With The Border Of Our Input */
a#Trickory input:focus + label {display: none;} /* "Turn Off" Label On Focus */
a#Trickory input {
width:95%;
z-index:3;
position:relative;
background-color:transparent;
}
a#Trickory label {
position:absolute;
display:block;
top:3px;
left:4px;
z-index:1;
}
You can see this working over at jsfiddle, note that this solution only allows the user to select the field once, before it removes the label for good. Maybe not the solution you want, but definitely an available solution out there that I have not seen others mention. If you want to experiment multiple times, just change your #hashtag to a new 'non-visited' tag.
http://jsfiddle.net/childerskc/M6R7K/
I have a search bar in my navigation bar (using Bootstrap):
<li>
<form class="navbar-search pull-right">
<input type="text" class="search-query offset1" placeholder="Search">
</form>
</li>
I want to change the default background color and text color, so I've implemented the following CSS:
input .search-query {
background-color:#f47443;
color:white;
}
Yet the colors remain the same -- black and white. Is there something special about form/input background colors and font colors that I'm missing?
You want:
input.search-query {
/* css */
}
JS Fiddle demo.
Without the space it selects an input element with a class of search-query; with a space separating the terms input and .search-query the browser is looking inside the input element for a descendant element with the search-query class.
Incidentally, the selector as you wrote it:
input .search-query {
/* css */
}
could never match any element, since an input (as are img elements) void elements in that they cannot contain descendant elements or even text.
References:
CSS Selectors (Level 3), W3.org.
input .search-query {
background-color:#f47443;
color:white;
}
>
input.search-query {
background-color:#f47443;
color:white;
}
Remove space.
CSS: Is it possible to specify a style to a fieldset before another fieldset? When Two fieldset follow in my code I would like to apply them a specific style.
EDIT Without using class and id of course...
Here is my code
<div id="tabs">
<fieldset class="one">
<legend>One</legend>
Text
</fieldset>
<fieldset class="two">
<legend>Two</legend>
Text
</fieldset>
</div>
Ths give me this :
And I would like this :
With CSS you can apply styles only to child of any element or siblings of it, that's why we can apply style only on second fieldset using + Adjacent sibling selector. In following demo i will show how to do it.
About all possible CSS2 selector you can read in specification to make yourself understand: what you can made with css selector and what not
May be my explanation demo on dabblet.com can help you to solve your problem.
The result:
HTML markup:
<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>
<fieldset> </fieldset>
CSS markup:
/* detect only first fieldset */
fieldset:first-child {
background-color: green;
}
/* detect all sibling fieldset element after first one */
fieldset:first-child ~ fieldset {
background-color: gray;
}
/* detect only first sibling fieldset element after first one */
fieldset:first-child + fieldset {
background-color: red;
}
Without using any classes or id's you can use first-child to target the first one and then use the default styling for second.
e.g.
form fieldset{ background: green; }
form fieldset:first-child{ background: red; }
First fieldset will have a red background, any others will have a green background. Note though this is for fieldsets within the same form. If they are in separate forms, then you can apply the same principle using the form:first-child
Why not assign each one a specific class or ID?
<fieldset class="firstset"></fieldset>
<fieldset class="secondset"></fieldset>
If you want to avoid using ID or class names , then go for the first-child property.
For eg -
form fieldset:first-child{
//your css code here
}
If you don't want to use classes or id's but still want them to have different styles, how about using inline CSS for each fieldset?
Is there a particularly good reason to avoid classes and id's while still wanting to use CSS? With a little more detail, we can probably give you a better answer.