I have something like this
<form class="Form">
<FormField>
<label class="FormLabel" ..>
<div class="FormInput">
<div class="InputField">
<input../>
</div>
</div>
</FormField>
</form>
I need to apply styles to FormLabel when input is focussed.
I understand that we cant get the parent selector(Is there a CSS parent selector?)
I want a work around to access the parent using css only (not use jquery)
I tried this using & in LESS
.Form {
.FormField {
.Input:focus & .FormLabel {
border:green
}
}
}
Still no luck :/ .. What am I missing? Thanks!
There is no way, currently, to select the parent of an item using CSS. It must be done with JavaScript/jQuery.
Since there is no way to get the parent item of the item that's in focus (in this case, the input), you cannot change it's style using pure CSS.
Related
I have some nested elements that I need to apply styles in a project that uses Vue.js and Element-UI.
<div slot="left">
<ul class="other">
<li class="disabledText">
<el-input v-model="data.other" type="textarea" :autosize="{ minRows: 4}" :maxlength="3999" :disabled="disSendButton" #change="updateSite('other', data.other)" #blur="data.other=$event.target.value.trim()" />
</li>
</ul>
</div>
In this instance I will be dynamically applying the class "disabledText" to the li element to color the text in the nested textarea, however I am unable to get the rule in the disabledText class to apply to the text area.
The CSS that I have tried:
.disabledText textarea{
color:red !important;
{
li.disabledText textarea{
color:red !important;
{
ul.other li.disabledText textarea{
color:red !important;
{
Even applying a class name directly to the textarea element and referencing that in the CSS class does not have any effect.
The rendered HTML looks like:
HTML
Maybe something like that is gonna work:
.disabledText .el-textarea
or
.disabledText .el-textarea .el-textarea__inner
Although it's kinda hard to solve this problem without any reproduction. Could you provide an example in CodeSandbox?
Suppose to have:
<div class="home">
<input type="checkbox"/>....
</div>
I need to insert margin-left:3px to checkbox. My css code is:
.home+input[type=checkbox]{
margin-left:3px;
}
Anyone can help me^
.home input[type="checkbox"]{
margin-left:3px;
}
<div class="home">
<input type="checkbox"/>....
</div>
You don't need the plus really... unless you have a specific need, and you need quotes around checkbox..!
You almost had it, you just need to wrap checkbox inside quotes input[type="checkbox"]
input[type="checkbox"]
{
margin-left:10px;
}
<div class="home">
<input type="checkbox"/>
</div>
Both of the other answers work, but neither of them is accurate.
Although I tend to recommend putting quotes around attribute selectors [type="checkbox"], it will work perfectly fine without quotes [type=checkbox]. Quotes are only necessary if you're including special characters.
The reason your code wasn't working was that the + in your selector matches siblings.
.home+input[type=checkbox]{} would match an input element with the type of checkbox that is placed immediately after an element with a class of home.
<div class="home">....</div>
<input type="checkbox"/>....
Since your input element is nested inside .home, you won't use the sibling selector +
That's why this code will do the trick:
.home input[type=checkbox]{
margin-left:3px;
}
<div class="home">
<input type="checkbox"/>....
</div>
I am using w3.css in my codeiniter project and I want to put them next to each other.
Here is my code:
<a type="button" class="w3-btn w3-blue w3-pull-left" href="http://localhost/cblog/posts/ikkinchi-post">Tahrirlash</a>
<form action="http://localhost/cblog/posts/delete/2" method="post" accept-charset="utf-8">
<input type="submit" value="O`chirish" class="w3-btn w3-red">
</formm>
Why do you have type="button" attribute on your link?
To display the elements on one line change their style to:
display: inline-block;
Or if you don't need padding
display:inline;
So it will look like this
a,form{
display:inline-block;
}
You can take a look at the documentation for W3.css and see if there's a class that will make an element display inline and maybe use the classes designed for navigation bars. If there's not, then you can create a class yourself and assign it to the element you wish.
.displayInline { display: inline;}
I want to target a div when a checkbox is checked. Can anybody tell me how can I target an outer div when checkbox is checked?
if($('.checkboxClassName').checked) {
$(this).parent();
}
It will target the parent div that the checkbox is inside, you can use more .parent() if tour target is not inside the same parent.
example: if your code is like this:
<div class="container">
<div class="target"></div>
<div class="parent">
<div class="checkboxDiv">
<input type="checkbox">
</div>
</div>
</div>
and you want to target the div.target you'll need the code like this:
if($('.checkboxClassName').checked) {
$(this).parent().parent().parent().find(".target").css('background','magenta');
} else {
$(this).parent().parent().parent().find(".target").css('background','cyan');
}
those parents will work like this: $(this).parent() = targeting div.checkboxDiv
$(this).parent().parent() = targeting div.parent
...
Note how this jsFiddle highlights the usage in a very simple way:
A check box is focused upon (checked).
The CSS style :checked catches this occurrence and applies a CSS style to the div contents.
The div can be another element you want, just make sure you play around with the code and adapt it to your needs. Let us know if you need any more help!
Source: :checked
HTML
<input type="checkbox" id="ossm" name="ossm">
<label for="ossm">CSS is Awesome</label>
CSS
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
}
Edit: I thought you would like a reference to 'how' CSS works here:
Attribute Selector by value
Element plus Element
...and in general CSS selectors
I've got an issue that I'd love to solve by using CSS without resorting to statically sizing my labels (but perhaps it isn't possible).
I have two labels per line, one for displaying a "title" and the other for displaying the associated "value". Here's how I'd like it to look:
This is similar to Align labels in form next to input but I'm wanting the second element per line left-aligned instead of the first one to be right-aligned. I tried modifying the accepted answer from that question and set the width of the "title" label, but that has no effect on my output. As I mentioned above, I'd rather not hard-code a width anyways, but I was hoping to get something working before trying to find a good, long-term solution that can account for larger "title" values.
Here's my current CSS (the classes should be self-explanatory):
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
}
.propertyValue {
text-align: left;
}
And my current HTML:
<div>
<div>
<label class="propertyTitle">Hello:</label>
<label class="propertyValue">World</label>
</div>
<div>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyValue">To All of the People in the World</label>
</div>
<div>
<label class="propertyTitle">I Want:</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
The HTML can be modified as well, if that'd make it easier. To conform with best practices, I'd rather not use tables to make this work.
Here's a jsFiddle showing what I have now, what am I missing? Ideally this solution would work for IE8+ and Firefox, so unfortunately HTML5 and CSS3 elements are discouraged.
EDIT
To reiterate after the first two answers came in (that both solve my issue), is there a way to do this without hard-coding a width for my "title" labels?
grouping your divs and labels like so:
<div>
<div class="titleWrap">
<label class="propertyTitle">Hello:</label>
<label class="propertyTitle">Goodbye:</label>
<label class="propertyTitle">I Want:</label>
</div>
<div class="valueWrap">
<label class="propertyValue">World</label>
<label class="propertyValue">To All of the People in the World</label>
<label class="propertyValue">These labels to line up</label>
</div>
</div>
with the following CSS:
.propertyTitle {
display:block;
text-transform: uppercase;
width: auto;
}
.titleWrap{
display:inline-block;
}
.propertyValue {
display:block;
width:auto;
}
.valueWrap {
display:inline-block;
}
should give you the desired result without having to specify the widths
Check out this jsFiddle
try using display:inline-block on your labels
.propertyTitle {
text-transform: uppercase;
width: 300px;/*Why doesn't this have any effect?*/
display: inline-block;
}
by default label is an inline element. that's why width property doesn't apply to label.
to apply the width you have to convert the label into a block level element by using display:block.
I hope it clarify the answer.
so you have to use this CSS property in your code.
.propertyTitle {
text-transform: uppercase;
display:inline-block; /*this will make the label a block level element*/
width: 300px;/*Why doesn't this have any effect?*/
}
More modern version is display: inline-flex;