We Keep Coding

Image Slider with border colour

Recently I'm using an image slider to my angular project then I need to add the background colour to each images' border like my attachment. I used custom CSS class to fulfil this but I cannot find way to apply this class correctly. But when I using DOM I can do that, My CSS class is as follows
border-boundry{
border-style: solid;
border-color: red;
}
NPM Package Link: https://www.npmjs.com/package/ng-image-slider
Demo: https://sanjayv.github.io/ng-image-slider/

What if you use one of the classes you have on the right like ng-image-slider-container ?
Try to add "background-color: red;" on the class ".ng-image-slider", is this what you want to do ?

It is very possible that the library you're using is enforcing css rules with !important flag. So you can either try to override it with !important yourself (not recommended ), or try to use already existing classes by adding more css to them...

Add the following lines in the styles.css of your angular app. With this you get the selected image surrounded with a frame.
.selected-image {
border: 1px solid lightgrey;
}

remove the inherited CSS value?

I'm trying to remove the value of an inherited CSS property using Jquery.
.class1 #id1 div.class2 input.class-input{
border-color: #bbb3b9 #c7c1c6 #c7c1c6;
}
Anyone tell me how to remove this "border-color".
Thank.

Create a new class for example
.new_class{
border-color: #00ffdd !important;
}
!important does the trick!
Check this

You can use jQuery, but you'll have to assign a value to the border-color property. You can use transparent though:
$('.class-input').css('border-color', 'transparent');
Edit: Or you can disable the whole border:
$('.class-input').css('border', 'none');

You can either swap the on your div to change the color, or set the border color to empty using
$(".class1").css("border-color", "");
But I would recommend swapping out the class using the removeClass and addClass JQuery functions.

If you still want to keep the width of the border:
border-color: transparent;
If you want to remove the border all together
border: 0;
Edit: border: none; will give your the same result
So your jquery could look something like this:
$(".class-input").css("border","0");
However I would suggest using CSS if you don't need to make it animated. Since you raised the concern about .class1 #id1 div.class2 input.class-input.myclass (I'm assuming that's what you mean since you wouldn't be throwing a div into an input box.
You can use the CSS pseudo-selector :not
.class1 #id1 div.class2 input.class-input:not(.my-class){
border: 0;
}

The simplest way to handle this is to add another reference to give your override code a higher specificity.
.class1 #id1 div.class2 input.class-input [#MyNewID]{
border: none;
}
This removes the border for the area where you have added the ID so that if you are using this same format in other pages you can add an additional ID on the element on the page where you want the border to "disappear"
Please don't use !important this is a lazy way to override code and is not necessary 95% of the time. It will also cause you problem later when you are trying to change this if you are pushing down site wide skins.

Prevent css interact in a div

I am doing a code that do some js injection of code in page, with JQuery. But in my input that i get in some pages modify it, I am putting all important attributes and define them as !important, but it's impossible to put all the attributes in all the tags.
Someone know how to disable all other css inside a div?
Solution I think:
I found a solution but i don't want to use it. Its eliminate al css from the page, while i am injecting the code after using that code I eliminate my css and code and apply the original code from the webpage
Thanks

If you're using that many !importants you're doing it wrong.
The solution to this problem is to properly organize your css. Important stuff last, because it overrides what was previously styled. Also use your selectors wisely. Example:
<a class="link">Link</a>
.
a:link { color: red; }
.
.
.
.link { color: green !important; } // Nop
a.link { color: green; } // Yup

If you override everything it will work with normal CSS rules on every page. Not what you were hoping for, but it is a solution.
css:
#myInsertDiv {
color: blue;
padding: 0;
margin: 0;
background: white;
border: 0px;
/* etc you have to restyle EVERY possible value */
}
html:
<div id="myInsertDiv"></div>
The main issue is you have to style every attribute, and reset everything else to a default value.
Or you can insert all the style information into the style attribute on the div, but that is probably doing it wrong too.

If I got you right you can use jQuery for modifying CSS properties on any elements of the page (huh), using something like this $('.Myclass').css('color','#ff0000')
And more about selectors in jQuery - http://api.jquery.com/category/selectors/

Setting the background colour of zebra-striped table rows

I am using:
tr:nth-child(2n+1) {
background-color: #DDDDDD;
}
To zebra-stripe a table. I have the class:
.redbg {
background-color: #FF6666;
}
And am using:
$(this).parent().parent().addClass("redbg");
To use JQuery to change the background colour of the rows when I need to.
Unfortunatly, it only works on the non-2n+1 rows. How do I recolour the #DDDDDD rows?

Simply change the "redbg" class to add the tr to the front:
tr.redbg {
background-color: #FF6666;
}
This occurs because tr:nth-child(2n+1) is more specific than .redbg so it overrides the background color no matter what. Changing it to tr.redbg makes it just as specific so the "redbg" class will override the :nth-child() selector.
See the jsFiddle
Note for future reference: The tr.redbg selector has to be defined after the tr:nth-child(2n+1) selector in order for it to override the background color.

It seems like that might have something to do with the rules of CSS specificity.
Try changing your selector to tr.redbg and see if that works.

Don't use !important (as another answer suggests)
Instead, make your selector more specific. Add add something like
table tr.redbg { background-color: #FF6666; }
Here's a great link on calculating CSS specificity.

I think you need to make your redbg class more explicit than the nth child to override it.
Maybe something like (though I haven't tested it, but should get you started):
.redbg, tr.redbg:nth-child(2n+1)
{
background-color: #FF6666;
}

Something about tr:nth-child(2n+1) taking priority because it is more specific selector.
Change the other one to
tr.redbg {
background-color: #FF6666;
}
and it shoudl work

Remove Opera Mobile blue border around <a> links

I have an webapp, where buttons are created with <a> elements, and all have href set to #. I want to remove blue border around <a> links during mouse click, because Opera Mobile annoyingly highlights all <a> elements, which has same href set.
Example picture:
How can I remove it?

I think Opera may be looking for something a little stricter on the outline element.
Try:
a:focus { outline:0px solid #fff; }
The 'solid' and 'colour' will be ignored.

Try this:
a, a:active, a:focus {outline:none}
Also if you are having trouble on a Flash object/embed, you can:
object, embed {outline: 0}

Not 100% because I can't really test, but did you try adding outline: none; to the css for links? You may need to add it to a:focus and/or a:target
Uh-oh:
Spatial navigation: Spatial Navigation
is an Opera feature whereby each
element available for activation is
put into a collection. When the user
moves a joystick or clicks specific
keys, the focus is moved to the next
element in the collection. This
element is typically highlighted with
a blue or black border. Links, form
controls, and elements with onclick
handlers are added to the collection.
http://dev.opera.com/articles/view/characteristics-of-widgets-on-mobile-pho/

Use div's with onclick() handler, instead staight <a> or buttons:
Example:
In CSS:
#home-send{
background: url(gfx/button.png) no-repeat;}
On page:
<div id="home-send" onclick="next('NEXT ACTION');"></div>
On click on the DIV the action will take place ,but no outline borders effect.
I hope this help

To remove the Blue border use this on TOP of you CSS file
:focus { outline: 0 solid; }
or
:focus { outline: none; }

I have had the same problem and none of the answers here worked. However, I recently found a solution that worked for me (A little late to the party however...).
Try:
:focus{
outline: 2px solid rgba(0,0,0,0.0);
}
If that doesn't work, you can go more specific like:
a, a:active, a:focus {
outline: 2px solid rgba(0,0,0,0.0);
}
You need to actually set an outline first, then make it transparent.
https://dev.opera.com/tv/tweaking-spatial-navigation-for-tv-browsing/