I'm new in HTML and CSS. In fact, it's my first site I build in my learning. Why doesn't :hover effect work on the class I've pointed it to?
I'd be really thankful for every help. But please explain, don't just show me "how to".
I'm trying to get the search_type selector getting visible only after hoovering the "search" button
Thanks in advance. (Here's the edited to be simpler code)
https://codepen.io/_Hiderr/pen/WNNdJdo
Like so: https://codepen.io/bjorniobennett/pen/OJJzZrX?editors=1100
The basic behaviour of :hover is that it can affect itself and the elements inside of it, or the next adjacent sibling . So I wrapped the search button and the select element in it's own container, and placed the :hover on the container itself. By placing the :hover on the container, you can now manipulate it's children.
<div class="search-container">
<select class="search selector" name="search_type">
<option value="">Videos</option>
<option value="search_users">Channels</option>
</select>
<input class="search button" type="submit" value="Search" />
</div>
Seems that your css selector has no match in the markup:
search.button:hover ~ .search.selector
would match any element like this:
<button class="search button">Search</button> <span class="search selector">Selected</span>
See: https://codepen.io/andreaslangsays/pen/RwwxyEN
Related
Hello I'm trying to make an input field visible which is inside <div style="display:none"> like this.
<div style="display:none">
<input type="text" value="xyz" [add some attribute to force this input field to be visible or something]>
</div>
Currently, it is not possible with CSS to make child elements visible if a parent element has display: none. If the :has() selector, which behaves as a parent selector, is supported by browsers you'll have that ability.
Today the only way I can think to do what you are asking would require JavaScript.
It is not possible but you can hide all other elements besides the input with this CSS make sure parent is not hide.
.input-contain-div *:not(.not-hide) {display:none;}
<div class="input-contain-div">
<input class="not-hide" value="xyz" />
<span>I am hidden</span>
</div>
.input-contain-div *:not(:input.not-hide) {display:none;}
I've been running around trying to figure out how I can use grid to format the layout of a form. I seem to be doing exactly what other coders are doing to utilize grid in CSS but it's just not working. My goal is to put the "type" selector to the right of the pet name and the reset button to the right of the submit button. Could someone point out what I'm missing?
my css code and what the form looks like
The HTML for the form
I think your issue might be because of the <div> you have on both input and select tags. By default div are block elements and browsers will start div on a new line by placing a line break before and after a div.
One quick fix is removing the div surrounding your Pet Name and
Type. If you must, have both of them in a single div.
Preferably use 1fr in place of 50%.
You will get this desired output
You are using seperate div for individual elements, that's why the elements are displaying one after another. You can put a common div for the elements which you want to display adjacent to each other.
<div class="grid">
<div>
<legend>Add pet</legend>
</div>
<div>
<label for="Name">Pet Name</label>
<input type="text" id="name" name="pet_name">
<label for="Type"></label>
<select id="type" name="pet_type">
<option value="Cat">Cat<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
</select>
</div>
<div>
<button type="submit" id="new_pet_submit_button">Create New Pet</button>
<button type="reset">Reset</button>
</div>
</div>
I have this site:
http://www.les-toiles.co/shop/amandine-dress/
I put a picture to understand better what I want.I want to position these sights integral to be in line with the "in stock".
This is code HTML:
<div class="single_variation_wrap" style="">
<div class="single_variation">
<p class="stock in-stock">Only 2 left in stock</p>
</div>
<div class="variations_button add-cart">
<div class="cart-number">
<span></span>
<div class="quantity">
<input type="number" step="1" name="quantity" value="1" title="Quantity" class="input-text qty text" size="4" min="1" max="2">
</div>
</div>
<button type="submit" class="button single_add_to_cart_button alt btn-block">
<i class="icon-cart2"></i>
Add to cart
</button>
</div>
<input type="hidden" name="add-to-cart" value="1726">
<input type="hidden" name="product_id" value="1726">
<input type="hidden" name="variation_id" value="1922">
</div>
How can I resolve this with CSS?
I tried to add this CSS code, but unfortunately not working
.cart-number {float:left;display:inline-block;}
this is not just an easy quick thing that you can get. There are much more things that need to changed. Let me see how far can I explain. Refer the attached images. For this, you should use the 'Chrome Dev Toolbar' or Firebug of Firefox, so that it helps.
First, the div block of your Wishlist button is completely outside the FORM element. So you can't make it inline, unless you move it inside the FORM element. See the 1st Image.
Now I have moved the DIV block of your Wishlist button inside the FORM element and have modified CSS for many classes and DIVs, definitely as INLINE, for demonstration. You need to really work hard to put this as modular as possible. I am sure you'll figure that out. In the next image, You'll see the effect as you wanted and see the CIRCLED section for the added or edited CSS code
Add display:inline-block; to both .button and .cart-number. It tells the elements to position themselves on the same line, and hopefully with this method you should't need to use float.
In my site I have this code (Wordpress / Woocommerce Cart page):
<input type="submit" class="button" name="update_cart" value="Update Cart">
I want to add an update icon after the text "Update Cart" On other pages was it fairly simple using a :after pseudo element.
I don't know what I'm missing but I can't get it to work with the mark-up above.
For instance I have tried
input[name="update_cart"]::after {
etc.
}
and
.button[name="update_cart"]::after {
etc.
}
This did not work.
Please advice.
There is the following note in CSS 2.1: “Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.” This has not happened so far, and browsers simply don’t implement those pseudo-elements at all for elements like input. But they do implement them for button.
So if you can change the markup, you can append generated content to the button text:
<style>
.button[name="update_cart"]:after {
content: " ⤾";
}
</style>
<input type="submit" class="button" name="update_cart" value="Update Cart">
<p>
<button type="submit" class="button" name="update_cart" value="Update Cart">Update Cart</button>
The example includes an input type=button element too, to illustrate how the button rendering is the same, except that for button, generated content works.
You can't use :after or :before on input or button element.
You can use a span element with a button inside and an :after in the span with icon (probably with a character as content using Font Awsome or Icon Moon).
Don't forget the content inside :after css, the pseudo element will not be visible if this css property isn't properly set.
Something like this:
Where the user would click on any area of the button and it would select that radio button.
Any suggestions?
As far as I can tell, radio buttons as self closed, and can't wrap around other elements.
The best way is to just wrap the <input> in its <label>, as clicking a label also has the effect of focusing its associated input:
<label>
<input name="transfer" type="radio">Bank Deposit
</label>
No javascript required: Demo: http://jsfiddle.net/GTGan/
If you need to style the label text separately, just wrap it in a <span>.
use Bootstrap, to create buttons around radiobuttons:
<label class="btn btn-lg btn-default">
<input type="radio"> Something
</label>
Have you tried using the LABEL tag? For accessibility sake we should be using label tags to associate labels to form controls all of the time. Not only does that help tie things together for screen readers, but it also makes the label as well as the control clickable.
You can read a bit more detail and find an example here:
http://webaim.org/techniques/forms/screen_reader#labels
You could use javascript for achieving this effect by giving it an onClick event, or you could just use jQuery in combination with some gui-plugins. I'd prefer this solution for cross-browser compatibility.