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; }
Related
In the link above, how can I make that when I click on "Register" it will hide the welcome class and show the register class ...
If I substitute focus for hover it works but it's obvious that I need a clickable option and not on mouse over...
*:hover ~ .register_box {
display: flex;
}
*:hover ~ .welcome_box {
display: none;
}
And I am wondering how to do this in CSS not JavaScript.
And I am using all elements selection (the "*") for testing purpose.
https://jsfiddle.net/sufwaqaa/
I have the following CSS code:
#searchbar-wrapper input#header-searchbar:focus +
#search-dropdown-wrapper { display: block; }
The purpose is that a dropdown becomes visible when the user puts focus on a textbox.
The dropdown should by default be invisible though:
#searchbar-wrapper #search-dropdown-wrapper{ display: none; }
Now the problem is that when I try to select an item from the dropdown list (anchor href), the dropdown wrapper disappears before I'm actually able to execute the click event. This happens because there is no focus on the textbox anymore.
Is there an easy solution for my problem without requiring to change the entire code?
Thanks!
Edit: I've added the resulting HTML in an image, because it is being dynamically generated.
Edit2: Fiddle based on the fiddle made by #anpsmn: http://jsfiddle.net/thh9z99c/2/
I need a list with anchors because they represent a list with urls.
Use the CSS pseudo selector [:focus] and then extend it to the child element.
//CSS BLOCK
#searchbar-wrapper input#header-searchbar{
}
a{
display: none;
}
#searchbar-wrapper input#header-searchbar:focus>a { // use [:focus>a]
display: flex;
display: -webkit-flex;
}
It works with the pseudo-class active instead of focus:
#searchbar-wrapper input#header-searchbar:focus +
#search-dropdown-wrapper, #searchbar-wrapper input#header-searchbar +
#search-dropdown-wrapper:active { display: block; }
#searchbar-wrapper #search-dropdown-wrapper{ display: none; }
Fiddle: http://jsfiddle.net/thh9z99c/3/
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.
Is there any way to change the style ui of the asp.net checkbox.
I tried this:
.cabeceraCheckBoxNormal
{
background:url("../../../ig_res/Default/images/ig_checkbox_off.gif") no-repeat;
clear:left;
margin:0;
padding:0;
}
but the result is not what i looking for. Because the image appears near the control, and i can see the normal style near the image.
Like this
Edit:
I decided to inspect the html generated and I saw that the ID set on asp checkbox is set to a span, and inside this is the input type checkbox...
so I change the style to this:
input[type="checkbox"]
{
background:url("../../../ig_res/Default/images/ig_checkbox_off.gif") no-repeat;
background-position: 3px 2px;
display:block;
clear:left;
margin:0;
padding:0;
}
But nothing happens
By far the best way to get a customised checkbox effect is to add a <label> element linked with the checkbox via the for attribute. Then hide the checkbox and style the label's before pseudo-element as your checkbox instead.
Something like this:
<input type='checkbox' id='myCheck'><label for='myCheck'>Magic!</label>
with css:
#myCheck { visibility: hidden; }
input[type=checkbox] + label::before {
display:block;
content:url('ig_checkbox_off.gif');
position:relative;
}
input[type=checkbox]:checked + label::before {
content:url('ig_checkbox_on.gif');
}
I've created a jsFiddle example to demonstrate: http://jsfiddle.net/f9tLemyy/
Hope that helps.
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