I am working on my website so it look and work almost the same even if JavaScript is disabled, So i have a INPUT and TEXTAREA tags when JavaScript is enabled i can focus my mouse on the INPUT and the TEXTAREA style become display: block from display: none, Is there a way to check with CSS if the user is focus on the INPUT tag and then apply some styles to the TEXTAREA tag?, Thank you all and have a nice day.
If you have the textarea after the textbox than yes, you can use + adjacent selector
textarea {
display: none;
}
input[type=text]:focus + textarea {
/* Switching styles for textarea when textbox is focused*/
display: block;
}
Demo
Note: Add a class to input[type=text] for selecting specific
element, else the above selector will trigger all textarea and
input[type=text] elements
You can use an adjacent selector like this:
JSFiddle Demo
HTML:
Click on the text input
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
CSS
input[type=text]:focus {border:1px solid red; }
textarea { display:none; }
input[type=text]:focus + textarea {display:block; }
Though you will notice that you can't actually click and focus on the textarea when it appears.
Yes, you can do it with CSS using Pseudo-classes
Example for :focus
To avoid hiding the textarea after focusing on input use the following:
textarea:hover,textarea:focus{
display:block;
}
See the demo here.
Related
Lets say i have this structure :
<li>Something something <input type="checkbox"></li>
How could i apply a simple text-decoration: line-through; to li content when checkbox is checked ?
I tried this with no luck using the & sass selector :
li {
& input:checked {
text-decoration: line-through;
}
}
EDIT :
I appreciate all the answers,however i was looking to do this using sass,i thought the & parent selector has this functionality but after i researched a little bit,i found out its not meant to be used that way.
Nevertheless,i found a solution without tweaking my structure or add javascript,i found out that bootstrap does not constrain you to place the checkbox after the li content in order to show it in the far right position,you can place it before and it automatically sticks it to the right,so i did that and placed the li content inside a span,so i just selected input:checked + span which gave me the desired result.
You can't do it. A Element has only access to his child and siblings.
With the siblings there is a neat trick where you can achive a similar result.
At first you need to move your checkbox at the beginning (html) so you can style the next siblings with ~ selector.
Then you can apply some css rules to the parent to swap back to order.
div {
display: flex;
flex-flow: row-reverse;
}
div input[type="checkbox"]:checked ~ span {
text-decoration: underline;
}
<div>
<input type="checkbox">
<span>Hallo Text</span>
</div>
Sorry but you can´t, you need javascript or SassScript to do that, you can try this https://sass-lang.com/documentation/style-rules/parent-selector
You don't need Javascript for this, but you do need to be able to add something to your HTML.
You can do it if you are able to add an element - put the text into its own div and putting it after the input.
Then use CSS grid on the li element, changing the order that the input and the div are shown. This just changes the visual order so you can still use the + sign to indicate the element which is the immediately following sibling of the input.
li {
display: inline-grid;
grid-template-columns: auto auto;
}
li input:nth-child(1) {
order: 2;
}
li div:nth-child(2) {
order: 1;
}
input:checked+div {
text-decoration: line-through;
}
<ul>
<li><input id='input' type="checkbox">
<div>Something something</div>
</li>
</ul>
How do I use the :checked css for my radio buttons with hidden input buttons?
http://cormilu.com.br/loja/sem-categoria/test-2/
I've tried:
input[type=”radio”]:checked{ color:red; … }
input[type="radio"]:checked+label{ color:red; … }
label > input + img{ color:red; … }
label > input:checked + img{color:red; … }
Is it because of my page setup? Ihid the input radio buttons and replaced them with images.
Thanks for your help.
Cheers,
Amir
The problem is that you can't target the image or the label which you had replaced the radio button with.
You can either:
1) Use JavaScript to change things (targeting parentNode) upon radio button click/change
2) Change the HTML markup if it is able to solve your problem, and apply CSS:
Move the <img> tag after the <input> and use the CSS sibling selector (+):
HTML:
<label class="hideradio-vars">
<input type="radio" value="20-bolas-fio-de-3m" id="pa_kit" name="attribute_pa_kit">
<img src="http://cormilu.com.br/cormilu-content/uploads/2015/04/free1.png">
20 Bolas Fio de 3m
</label>
CSS:
.hideradio-vars input[type="radio"]:checked + img {
/* Your rules here */
}
Unfortunately you cannot target the parent with CSS, so you might want to look into JS/jQuery or to revise your HTML markup entirely.
I have a form that is display:none and when I am going to hover on a another link, then the form comes up. How can I put the cursor into the input field? Is there a way to do it in css?
If I make the form to display:inline-block directly, the cursor is in the input field.
My CSS:
.search-bar {
display: none;
}
#main-nav a:hover .search-bar {
display: inline-block;
}
My Form in the html file:
<input id="search_search" type="text" autofocus="autofocus" placeholder="Placeholder.Search.Main" name="search[search]"></input>
We can use HTML5 auto focus attribute
For Example:
<input type="text" name="name" id="search_search" placeholder="Placeholder.Search.Main" name="search[search]" />
We can use JQuery to do this using foxus()
Javascript:
$("#show").hover(function(){
$("#search_search").show();
$("#search_search").focus();
});
Doesn't work in Firefox but works in Safari
I think you might be looking for some client-side scripting (Javascript or javascript with JQuery).
If you don't want to accomplish this through client-side scripting, and only want to support html5, then you should take a look into the "autofocus" attribute of html5. See the top answer to this post.
I have a list of elements, and i want to change a style of an element when one clicks on the list element(and that specific style to stay the same until the user presses another list item).
I tried using the 'active' style, but no success.
My code:
#product_types
{
background-color: #B0B0B0;
position: relative; /*overflow: hidden;*/
}
#product_types a:active
{
background-color:yellow;
}
but the element is 'yellow' only a millisecond, while i actually click on it...
Use the :focus pseudo class
#product_types a:focus
{
background-color:yellow;
}
See this example -> http://jsfiddle.net/7RASJ/
The focus pseudo class works on elements like form fields, links etc.
The reason it doesn't work in other browsers is related to the css focus specification. It states:
The :focus pseudo-class applies while an element has the focus
(accepts keyboard events or other forms of text input).
So it seems to work perfectly fine with text input fields or when you focus using the tab key. To make the above compatible with other browsers add the tabindex attribute to each element and this appears to fix the problem.
HTML:
<ul>
<li id = 'product_types'>First</li>
<li id = 'product_types'>Second</li>
</ul>
CSS:
#product_types {
background-color: #B0B0B0;
position: relative;
}
#product_types a:focus {
background-color:yellow;
}
JSFiddle Example
I'm hoping someone can help me with this.
When I'm styling html components say all divs on the page I would add a CSS like:
div
{
background-color:Red;
}
which works fine. However when it come to styling an asp.net control say a button I try:
button
{
background-color:Red;
}
but this doesn't work. Could someone please tell me how you style these creatures?
An asp.net button is actually an input element. So to style it you would use:
input { background-color: red; }
But that would style all input elements (text boxes, button, radio buttons, check boxes). To target just buttons you can use some CSS3:
input[type=button] { background-color: red; }
Or, you can just give all the buttons you want to style a class and do it that way:
<asp:Button runat="server" CssClass="red-button" />
.red-button { background-color: red; }