I need to display the section based on the chckbox..for that i write through css
input[type = "checkbox"]:checked .sec-visible{ display : block; }
its working on ff, but not working on ie..any solution?
You have the selector a little muddled, you need to select the input with its class then the type:
input.sec-visible[type="checkbox"]:checked
Example here.
Related
First - sorry for the title - if you have a better suggestion as to what it should be named then please let me know.
I'm not sure if this is possible in the CSS hierarchy.
I have multiple elements and each one can have a .show class added to it, to show the the content.
I'd like to set a rule, so if the .show class has been added - any of the same element without (.show) it are then hidden.
My current not working attempt is to use:
.team_item {
display: grid;
&.show {
&:not(.show){
display: none;
}
}
So the logic would be:
element - should be visible
element + show class - element & inner content visible
element + show class - all elements without the show class should be hidden (display: none).
But I think I am trying to go back up the hierarchy in the CSS (scss).
Any help would be great.
Note: I'm fully aware that I can write JS to tackle this issue but was looking for a css (scss) solution.
I believe it needs to be along those lines:
$team-item-display:'block';
.wrapper {
#function hideElement() {
$team-item-display:'none';
#return 0;
}
&.show{
hideElement()
}
&:not(.show){
display:$team-item-display;
}
}
The direction of the solution is in calling a function that will set a different value of a variable that elements with no .show class use.
I havent tested the code. Hopefully it works.
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
If i I remove say
height:200
from my ExtJs panel and add a css class in its place
cls: "someclass"
My height property in my css class is overided because Extjs still puts in a style on the element for e.g. but with minimal value (2-4 px)
<div class="someclass" stlye="height:2px"></div>
Any idea how to stop that?
Thanks
Solution
using
bodyCls: "someclass"
is stronger than
cls: "someclass"
use bodyCls in your panel and set your css to the following:
.x-panel .someclass {
//css stuff in here
}
In Ext 3 you can use autoHeight: true in your config object to prevent Ext JS controlling it. See http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Panel-cfg-autoHeight for the docs.
For Ext 4 there doesn't seem to be an equivalent property, there is a discussion about this on the Ext forum: http://www.sencha.com/forum/showthread.php?133148-autoHeight-feature.
However in this case if you leave the height parameter out and add bodyCls : "someClass" to the config object, you can set the height using a css rule like: .someClass: { height: 200px; }.
Found it on a the Sencha forum
.someclass .x-panel-body {
height:600px;
}
dont ask me why :)
Is there a way that I can select a textarea such that $('#id_of_textarea').val() in jQuery will be ''? I tried using :empty. I saw that CSS provides a way to select empty inputs because the text is in the value attribute ([value=""]). Is there an attribute for the text in a textarea?
I'm looking for a selector that will work with CSS, not just jQuery.
Best solution I can think of is a CSS 3 workaround. Set the field to required (and unset it on submit if need be). Then you can use
textarea:invalid { /* style here... probably want to remove box-shadow and such */ }
this works in recent browsers except edge (at the moment):
textarea:placeholder-shown {
/* this should be active only when area is empty and placeholder shown */
}
so with jQuery for example you can pick all empty textareas:
$('textarea:placeholder-shown').val()
https://developer.mozilla.org/en/docs/Web/CSS/:placeholder-shown
If you're using React, then this is the solution:
textarea:not(:empty) {
// Apply css here
}
For instance,
/* Apply style when textarea contains text */
textarea:not(:empty) {
border: 6px solid blue;
padding: 6px;
}
Working demo:
Textarea - Select empty textarea using CSS
Note: While this works perfectly in React (because of re-painting caused by state update), It does not provide the same response if implemented using Vanilla HTML + CSS.
This works fine, as with input:
<textarea name="comment" id="comment" class="authority_body-input" data-val="{$form.comment}" onkeyup="this.setAttribute('data-val', this.value);">
textarea.authority_body-input:not([data-val=""]):not(:focus) {
color: red;
}
You can use the :empty css pseudo-class.
See an example in jsfiddle.
In the example there is a button for dynamically add new empty textareas to the DOM, so you can see that the new elements also are affected with the pseudo-class.
The code in the example was tested in Firefox 5.0, Opera 11.50 and Chromium 12.
Also, you can see a good description for the :empty pseudo-class here.
For those who are using AngularJS, you can use ng-class in your view to add a class to your textarea to know if it is empty or not.
HTML :
<textarea ng-model="myForm.myTextArea"
ng-class="(myForm.myTextArea.length)?'not_empty':'empty'">
</textarea>
CSS :
textarea.empty {
background-color:red;
}
textarea.not_empty {
background-color:blue;
}
Here is a jsfiddle.
I have lots of "checkbox"es in my page. I want to show(display:block;) a box, if the last "checkbox" of my page is checked, using CSS. The box is an immediate "textbox" after the last "checkbox".
It seems that :last-child is not working for input[type="checkbox"]. Even if it works, there will be another question: Can I use another selector (:checked) immediately after it(:last-child)?
Here is what I try to (but didn`t answer):
input[type = "checkbox"]:last-child:checked ~ input[type = "text"]{ display : block; }
You could try using.. (I cannot test right now if it works)
input:checked:last-child
{
...
}
EDIT: I've corrected the selector and tested it. Works! Here a working sample