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.
Related
How can I pop up the contents of a mostly undisplayed element when it is moused over?
Given
Some text.<span class="note">Note contents.</span> Text continues.
I’d like to replace the note with, say, an * (or maybe a block of color). When that is hovered over, the note contents would pop up over the underlying text (over it, not inline).
Something like:
.note {position: absolute;
display: none}
.note::before
{display:inline;
contents: "*"}
.note:hover
{display: inline}
But of course that does not work, since .note {display:none} also hides the ::before child.
I could do this:
.note {font-size: 0}
.note::before
{content: "*";
font-size: initial}
.note:hover
{font-size: initial}
but that expands the note inline and I need it instead to overlay the text that continues after the note.
If I could change the HTML, I could add <span>*</span> before the note, and trigger the pop-up on that. But I can’t change the source HTML.
CSS3 and SASS are OK, but I can’t use Javascript.
Use visibility
.note {
display:inline-block;
white-space:nowrap;
width:5px;
visibility: hidden;
background:#fff;
}
.note::before {
visibility: visible;
content: "*";
}
.note:hover {
visibility:visible;
width:auto;
white-space:normal;
position:absolute;
}
Some text.<span class="note">Note contents.</span> Text continues. Something like:
I have read through many questions about styling of jQuery UI autocomplete however I still have a problem that I can not solve. I am creating custom rendering like this:
$('.license-input').autocomplete({
source: "{{url(LaravelLocalization::getCurrentLocale().'/ajax/license')}}",
minLength: 2,
delay: 250
}).autocomplete('instance')._renderItem = function( ul, item ) {
return $('<li>')
.append('' + item.name + '')
.appendTo(ul);
};
So my <li> items contain links.
Now I want to style the dropdown and I use the following CSS (I have exaggerated the colors for visibility):
ul.ui-autocomplete li
{
border:none;
background-color:#f505f5;
padding:10px 16px;
font-size:12px;
outline:0;
}
ul.ui-autocomplete li:hover
{
background-color:#05e5e5;
}
ul.ui-autocomplete li a
{
border:none;
background-color: #f505f5;
}
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
}
However, the links does not get styled. What puzzles me the most is what I see when inspecting the result in Chrome's debugger:
You can see that the computed style for the active <a> element is the blue color, however the item itself has white background. What is this white thing that I should style?
I have already tried various selectors like .ui-state-active, .ui-state-hover, ui-state-focus, ul.ui-autocomplete li a:hover and others.
Note: the border: none; rule from the ul.ui-autocomplete li:hover a actually gets applied - without it the style looks different (has 1px black border around the link). So the only problem is the background.
Looks like the link in the list item has a background-image set. This will override any background colors you use.
You can set the background-image: none for that particular link
Something like:
ul.ui-autocomplete li:hover a
{
border:none;
background-color: #05e5e5;
background-image: none;
}
Example of link with background image and one without:
https://jsfiddle.net/yuwhuwkz/1/
I would like to change the background color for the text area. I am using Minamaze theme.
Tried changing the background of textarea, but it didn't help.. Tried clearing the cache as well
Need some guidance..
The website is quantgreeks.com, I want to change the white background behind the text.
In your style sheet find:
#content {
clear:both;
margin:0;
padding:20px 10px;
}
and add a background color to it. For example:
#content {
background-color:#000000;
clear:both;
margin:0;
padding:20px 10px;
}
I want to use my custom style on input[type="submit"] button with jquerymobiles button but it is not working.
My html code is:
<input type="submit" value="Button name">
My css code is:
input[type="submit"]
{
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red;
background:url(../images/btn_hover.png) repeat-x;
}
Same style applies when I use following html code:
Button name
jQuery Mobile >= 1.4
Create a custom class, e.g. .custom-btn. Note that to override jQM styles without using !important, CSS hierarchy should be respected. .ui-btn.custom-class or .ui-input-btn.custom-class.
.ui-input-btn.custom-btn {
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red;
background:url(img.png) repeat-x;
}
Add a data-wrapper-class to input. The custom class will be added to input wrapping div.
<input type="button" data-wrapper-class="custom-btn">
Demo
jQuery Mobile <= 1.3
Input button is wrapped by a DIV with class ui-btn. You need to select that div and the input[type="submit"]. Using !important is essential to override Jquery Mobile styles.
Demo
div.ui-btn, input[type="submit"] {
border:1px solid red !important;
text-decoration:none !important;
font-family:helvetica !important;
color:red !important;
background:url(../images/btn_hover.png) repeat-x !important;
}
I'm assume you cannot get css working for your button using anchor tag. So you need to override the css styles which are being overwritten by other elements using !important property.
HTML
Button name
CSS
.selected_btn
{
border:1px solid red;
text-decoration:none;
font-family:helvetica;
color:red !important;
background:url('http://www.lessardstephens.com/layout/images/slideshow_big.png') repeat-x;
}
Here is the demo
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; }