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;}
Related
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
I have the following HTML and CSS selector chain:
<div className="form-group">
<div class="control-custom-checkbox position-relative">
<input type="checkbox" class="custom-input" id="check1" checked>
<label className="custom-label" htmlFor="check1"></label>
</div>
</div>
.control-custom-checkbox .custom-input:checked~.custom-label::after { }
Next I added another div into the HTML:
<div class="form-group">
<div class="control-custom-checkbox position-relative">
<div class="required">
<input type="checkbox" class="custom-input" id="check1" checked>
</div>
<label class="custom-label" htmlFor="check1"></label>
</div>
</div>
I wrapped the markup in a new <div class="required"> and my styles broke. How should I change my CSS selector?
To keep it work, how it was before another div, you didn't need to change anything in your selector - it still will work and target needed HTML element.
You can check it there: https://codepen.io/anon/pen/BELXqW
The problem was your use of the 'sibling selector' in your CSS selector (~).
This requires that your .custom-label element be a sibling (i.e. next to each other within the DOM tree) of the .custom-input element. When you added the extra div it broke that relation (they were no longer 'next to' each other) so it broke your styling. (The fact that the div had the required class is irrelevant).
There aren't one size fits all fixes for this kind of issue but the safest fix would probably be to adjust the HTML so that they continue to be siblings.
<div class="form-group">
<div class="control-custom-checkbox position-relative">
<div class="required">
<input type="checkbox" class="custom-input" id="check1" checked>
<label class="custom-label" htmlFor="check1"></label>
</div>
</div>
</div>
(Or, as suggested in a comment, just add required onto an existing wrapper.)
If, however, that is not a possibility for some reason. You may be able to get away with removing the sibling selector requirement. E.g.
.control-custom-checkbox .custom-label::after {
/* Your CSS here */
}
Of course that selector may have been put there for a reason and removing it may have unintended side effects, especially if this will affect a large codebase. You will have to judge for yourself if it is safe to remove that sibling selector. I imagine it should be fine if .control-custom-checkbox always contains HTML structured just like your example, but there's no way to be sure without knowing more about the project.
From my initial testing, it appears that a fieldset's "form" attribute does not get passed to child controls.
I can't tell if I've got a different issue, or if that's the way fieldset is supposed to work. Seems like a fairly useless attribute on fieldset if so...
<body>
<section>
<form id="separate-form"></form>
</section>
<fieldset form="separate-form">
<input type="text" value="this doesn't get submitted to #separate-form ?">
<button>submit</button>
</fieldset>
</body>
As of April 2018, and testing on Chrome/Firefox, it seems as the though the answer is "No". A fieldset's form attribute does NOT apply to its child controls.
I had to iterate through all form elements setting the attribute for each.
Please see the form HTML code below
<form method="post" action="register">
<div class="email">
Email <input type="text" tabindex="1" id="email" value="" name="email"> </div>
</div>
<div class="agreement">
<div tabindex="2" class="terms_radio">
<div onclick="changeTerm(this);" class="radio" id="terms_radio_wrapper" style="background-position: left 0pt;">
<input type="radio" id="terms" value="1" name="terms"><label for="terms">I have read and understood the</label>
</div>
</div>
</div>
<div class="form_submit">
<input type="button" tabindex="3" value="Cancel" name="cancel">
<input type="submit" tabindex="4" value="Submit" name="submit">
</div>
</form>
Here I styled the agreement check box in such a way that radio input is completely hidden and background image is applied to the wrapper div, and onclick of the wrapper div will toggle the background image as well as the checked status of the radio input.
I need to set the tabindex index on the 'terms_radio' DIV, simply tabindex="2" attribute on div is not working,
Is it possible to bring the dotted border on the label for the radio input up on pressing the TAB when the cursor is at email input field?
DIV elements are not compatible with tabindex in HTML4).
(NOTE HTML 5 spec does allow this, however, and it commonly works regardless)
The following elements support the tabindex attribute: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.
Essentially anything you would expect to be able to hold focus; form elements, links, etc.
What I think you probably want to do here is use a bit of JS (I would recommend jQuery for something relatively painless) to bind to the focus event on the input element and set border on the parent div.
Stick this at the bottom of your body tag to grab jQuery from the Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
Then something like this would probably do the trick:
$(function() {
$('div.radio input').bind({
focus : function() {
$(this).closest('div.radio').css('border','1px dotted #000');
},
blur : function() {
$(this).closest('div.radio').css('border','none');
}
});
});
Yes! There is a spec for it, its called WAI-ARIA and its for accessibility : https://www.w3.org/TR/wai-aria-practices/#kbd_general_between
You could simply change the tabindex value from 2 to 0.
<div tabindex="0" class="terms_radio">
This provides the default focus state that goes with the flow of your code.
https://www.w3.org/WAI/PF/aria-practices/#focus_tabindex
You can put tabindex="2" for radio element and hide the radio element (not with display:none, but with z-index, so that it stays tabbable). When you press tab being on email input field, radio gets focus, and you can use
input:focus+label {}
to style the label
I've never used or even heard of this content property but it is interfering with my ability to select multiple items from a select list. Whatever 'content' is, I need it because when I delete it, there are background hignlights that no longer work properly.
Can someone help me figure this out? Is there a workaround?
form li:after
{
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
<form method="post" action="">
<li id="li_6">
<label class="description" for="element_6">test</label>
<div>
<select class="element select medium" id="element_6" name="element_6" size="10" MULTIPLE>
<option value="1">test1</option>
<option value="2">test2</option>
</select>
</div>
</li>
</form>
Here's info about the content property: http://www.w3schools.com/css/pr_gen_content.asp
I tried your code with and without content property and had no problem selecting multiple items from the list (firefox).
Good luck.
The CSS you list is the clearfix method to force a container to have a height big enough to contain a floated child element. The content property itself adds content, usually text or an icon. In this case it's adding just a period, but setting the visibilty to hidden and height to zero to hide the period.
Other than that, you'll have to be more specific about your problem. You'll probably have to check whatever other styling is on your form.