Please find the code here
I toggle a class min upon button click. To show this the color is toggled. Is there a way to add an icon to the button, which toggles for example between: icon-double-angle-right and icon-double-angle-left. I linked Font-Awesome CDN. I only care about recent browser, so mainly looking for pseudo elements based sol.
You can achieve this with pseudo attributes :
CSS :
btn.min { background:red; }
.btn:after {
content: attr(data-active-icon);
font-family: 'FontAwesome';
}
.btn.min:after {
content: attr(data-inactive-icon);
font-family: 'FontAwesome';
}
HTML :
<button class="btn" ng-class="{min: min}" ng-click="toggle()" data-active-icon='' data-inactive-icon=''></button>
Where your data-active-icon and data-inactive-icon is taken from this table.
Demo : http://jsbin.com/ariwij/1/edit
I haven't included bootstrap in the demo, but it will integrate just fine.
Make your HTML like this: <button class="btn" ng-class="{min: min}" ng-click="toggle()"><span class="arrow-left"></span></button>
Then use javascript or jquery to replace the class on the <span> with a different class on toggle. Then make your two CSS class rules, one with background image for your left facing arrow, one for your right facing arrow, or whatever the stylistic thing it is you want to achieve.
consider that your button is #butt:
$("#butt").click(function(){
$(this).toggle('red');
})
and CSS:
.red{
color:red;
}
To toggle an icon via class, have a look here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_like_dislike
Related
i have this search bar in my application which i want to modify:
Right now the "X"-Icon is visible from the beginning even tho it does nothing before an input was done, so i want to make it appear AFTER the user starts entering text.
The icon is a SVG i added and styled seperatly.
I don't realy know how i can do this, i thought its easy and i can just use something like "::after" but it seems that this it not possible with input fields.
Ps.: im an absolute beginner in CSS so please have mercy.
Best way to achieve your requirement would be to have different classes which shows/hides the icon by checking when input is not empty in JS.
If you want to achieve without using JS you can target the adjacent button element when the input is focussed and add ::before pseudo element and style it.
input:focus+button:before {
content: "X";
position: absolute;
left: 0;
color: red;
}
It's not possible with CSS. You would have to use Javascript.
Javascript
// set the id of the x button to x-button
// set the id of the input field to input
var x_button = document.getElementById("x-button");
var input = document.getElementById("search-input");
input.oninput = function(){
if(this.value) x_button.classList.add("visible");
else x_button.classList.remove("visible");
}
CSS
.x-button { display:none;}
.visible {display:block;}
it is possible if you wanna do it using only css.
#Search{
font-size:22px;
color:green;
background-image:url('images/search.jpg');
background-repeat:no-repeat;
background-position:center;outline:0;
}
#Search::-webkit-search-cancel-button{
position:relative;
right:20px;
}
<input id="Search" name="Search" type="search" placeholder="Search" />
In my page,I use tooltip which class name is .tooltipcell to the grid cell,and also use tooltip which class name is .tooltipbtn to the button.Now I want to change the background color of the tooltip in grid,but I do not want to affect the background color of the button tooltip.How to do that?I use to codes below,it affects the two tooltip.
method1:both effect
.k-widget.k-tooltip{
background-color:red; //set the desired color
}
method2:both effect
div .k-widget.k-tooltip{
background-color:red; //set the desired color
}
JS
show: function (e) {
e.sender.popup.element.addClass('red-tooltip');
},
and CSS
.red-tooltip {
background-color: #f00 !important;
}
You can do this:
.tooltipcell{background-color:green;}
.tooltipbtn{background-color:green;}
Just incase your div .k-widget.k-tooltip might overwrite the style you may have to target it deeper like this:
div .k-widget.tooltipcell{background-color:green;}
div .k-widget.tooltipbtn{background-color:green;}
The is an amendment to MarioD Answer.
I didn't test it but given that it works, a better practice would be to concatenate these classes. It saves size in the css and improves loading time. Do this:
div .k-widget.tooltipcell, div .k-widget.tooltipbtn {
background-color:green;
}
I had the same problem where I was using kendo tooltip. I wanted to change the CSS of the tooltips only in one place leaving the rest of the tooltips intact.
Using css the normal way to do this would be to use target .widget and .k-tooltip CSS classes.
Although this would change all the tooltips within a page.
So, since I wanted to change only one tooltip (same problem as this post) I had to do a JS approach.
So, I had to use the show function of kendo's tooltip.
Example:
$('.target')..kendoTooltip({
position: 'bottom',
showAfter: 1000,
content: 'test',
function(e) {
e.sender.popup.element.addClass('customClass');
}
}).data('kendoTooltip');
I will try to post here a jsfiddle in few moments.
André
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
Just learning .less and using twitters bootstrap in my project.
If i whant an green button for an form to submit i have to write:
<input type="submit" value="submit" class="btn btn-success" />
But i will be able to skip the class attribute in the input tag.
I will not change the twitter bootstrap file. I will overload them in my default.less file like this:
button, input[type="submit"]{ .btn; .btn-success; }
But then I do not get the hover state and active state to the button and i get errors if i try to make it like this:
button, input[type="submit"]{/* previus code... */ &:hover{ .btn:hover; }}
You may notice what i trying to accomplish. I know I can do this in jquery or javascript but i will be able to do this in my .less-file whitout touching orginal bootsrap-files.
I'm not sure that that is possible without modifying the Bootstrap CSS.
Are you able to modify the bootstrap CSS at all? If so, you could add a .btn-hover class to .btn:hover, and then in button, input[type="submit"]:
&:hover {
.btn-hover;
.btn-success-hover;
}
.btn and .btn-success are classes. These classes are define in buttons.less. They call mixin from mixins.less called .buttonBackground. You can call this mixin for your buttons:
button, input[type="submit"]{
.buttonBackground(#startColor,#endColor);
}
#startColor and #endColor are for button gradient and the hover state uses the #endColor.
Or you can change colour in variables.less (btnInfoBackgroundHighlight) to your own.
Or you can use
.btn-success{
&:hover{
background-color: #yourOwnColor;
}
}
I've made a button that expands horizontally: http://jsfiddle.net/timkl/TsDud/
However I'm having a hard time getting my button's hover-state to work properly.
This is my markup:
<a class="action-button" href="#"><span>Some text</span></a>
I don't know how to style the hover-effect so that the entire button is "lit" when the user hovers over a part of the button that isn't covered by the <span>.
This is what I get when I hover over a part of the button that isn't covered by the <span>:
Check out my example here: http://jsfiddle.net/timkl/TsDud/
jsFiddle DEMO HERE
Change the last lines to:
a.action-button:hover > span
Ex:
a.action-button:hover > span{
background: transparent url(http://dl.getdropbox.com/u/228089/action-button-left-hover.png) no-repeat;
color: white;
}
And as I said in the comment above try to avoid to use separate images for your button states.
Use only one image and for ex. on hover just 'change' the background-position to the part of image representing the state you want!
It will save you the "button disappearance" until the new image is loaded.
You could change the hover rule to only be for a.action-button At present you have the style rule for both a.action-button and its span.
a.action-button:hover { ...
and
a.action-button span:hover { ....
Instead try applying it this way:
a.action-button:hover { ...
and
a.action-button:hover span { ...
won't work on some older version of IE however.
http://jsfiddle.net/HZpDL/