I have a drop-up menu and when you hover over the login button the login form popups but when you select the input field and than move the mouse out of the drop-up the drop-up disappears. So how can I keep that drop-up open?
On this jsFiddle can you see what I am trying to explain..
I tried this but that didn't work:
css
.login form input:focus .login{
display:block;
}
I also tried this css
.login > form > input:focus .login{
display:block;
}
html of the login button and the associated drop-up div
<li class="right"><p>Log In</p>
<div class="login">
<form>
<h1>Log In</h1>
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<br>
<div class="submit">Log In</div>
</form>
</div>
</li>
I don't understand why this is not working because when you hove over the login button you also set the display of the pop-up div to block so why does this not work.
First, both your CSS examples mean (you must read them from right to left):
"apply display:block; to any .login element which is in an input:focus child, which has a parent form, which has a parent .login element".
In fact, in CSS you cannot apply something to a parent element (<li>) upon action on a child element (your div.login).
But you could show/hide your .login element with a little bit of javascript. For example you could add a class to your this element after a click on your menu element <li>.
You will surely have to use JS for this. We cannot select parent element via CSS.
Question that will help you understand this:
Is there a CSS parent selector?
One more ref. here:
http://css-tricks.com/parent-selectors-in-css/
Hope you will like jquery for achieving this:
http://api.jquery.com/parent/
Enjoy Coding!!
Related
I was creating a search function on my webpage, where when the button (label) is clicked then the search bar will be appeared. However, it is not working with checkbox. I have another checkbox on the same page which is working and I make sure the for attribute in label is pointing correctly.
I have the following code in my html:
<input type="checkbox" id="search-switch" />
<div>
<label for="search-switch">
<button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<div class="search-placeholder">
<!-- a search bar -->
</div>
and the this in css:
#search-switch {
display: none;
}
.search-placeholder {
display: none;
}
#search-switch:checked ~ .search-placeholder {
display: block;
}
I also tried to put the <input> after the div that contains the label but still not working.
<div>
<label for="search-switch">
<button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<input type="checkbox" id="search-switch" />
<div class="search-placeholder">
<!-- a search bar -->
</div>
I'm building a no-js page in case people has javascript disabled in their browser settings, so I want a script-free solution. I know it can be easily done with js, and I don't even need to use checkbox method. Because of the layout I can't move either the place of <label> or the place of the search bar.
So I deselect the display: none; of my input checkbox and I actually solve the problem myself. It appears that with the button inside, the checkbox isn't checked. I now only need to add pointer-events: none; to my css of the corresponding button and it works now.
Here I come another question, which I think it might be self-explanatory: How would my button work again when js isn't disabled? Should I point it to checkbox instead?
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 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.
I am working on creating a simplified bespoke framework for structuring forms by only adding or removing html elements and without using classes or JavaScript.
After days of work, below is a demonstration of what I manged to do so far:
The only problem I am experiencing is highlighted in yellow circles above.
I simply can't get the input/textarea which is followed by an <i> or <a> to keep its original border-radius, which is set to 4px in this line of CSS:
/*(?) Form elements global border-radius settings*/
input, textarea, select, .select-input, fieldset > div > span,fieldset > div > a {
border-radius: 4px;
}
The full HTML and CSS which used to show the image above can be found in this JSFiddle here: http://jsfiddle.net/kvezedo5 - I have also uploaded a live version of the framework shown in the image above here: http://loai.directory/test
The HTML for the elements in question are below:
<fieldset>
<div>
<input name="">
<i class="icon-question tooltip-top" title="Text Goes Here"></i>
</div>
</fieldset>
<fieldset>
<div>
<input name="">
<a>Button</a>
</div>
</fieldset>
The culprit is this:
fieldset > div > *:first-child:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
You should change that to use a class so it doesn't clobber everything. This is the reason global selectors aren't usually recommended:
fieldset > div > .sharpcorners
Is there a multi-browser way to inline input and button? See http://jsfiddle.net/wf592/. Input appears below button. Simple margin doesn't help:
<div>
<input type="text" style="margin-top:-50px;" /><button style="height:25px; width:20px" />
</div>
This error showed up when I used jQueryUI calendar: calendar button is automatically inserted after the input tag. So I don't want to change markup with more divs.
Demo Fiddle
Add:
input, button{
vertical-align:middle;
}
More on vertical-align from MDN:
The vertical-align CSS property specifies the vertical alignment of an
inline or table-cell box.