Remove Highligthing From Dynatree Checkbox Mode on Click or Hover

In dynamics, using vista-skin, when you hover over a tree element, it has a hover effect where it has a blue background.

In addition, when you click on an element to test it, it has an orange border in chrome and a dotted border in IE.

I try to remove both of them so as not to affect the hover or click once.

See selectMode 3 for an example: wwwendt.de/tech/dynatree/doc/sample-select.html

Update: I found in / src / skin -vista / ui.dynatree.css, if you comment out the following blocks, this will prevent the backlight from blue. In addition, there is a line that needs to be uncommented in order to fix the outline that the web browser fits, as shown below.

/*Comment this out ul.dynatree-container a:hover { /* text-decoration: underline; */ background: #F2F7FD; /* light blue */ border-color: #B8D6FB; /* darker light blue */ } */ /*Comment this out span.dynatree-active a { border: 1px solid #99DEFD; background-color: #D8F0FA; } */ ul.dynatree-container a /*, ul.dynatree-container a:visited*/ { /*The line below was originally commented out, uncomment it to remove the orange/dotted border*/ outline: 0; /* @ Firefox, prevent dotted border after click */ } 
+4
source share
3 answers

DynaTree is now FancyTree and in fancytree, that's what I did.

 .fancytree-container, table.fancytree-container, ul.fancytree-container, span.fancytree-focused span.fancytree-title { border: 0 ; outline: 0; -moz-outline-style: none; } 
+3
source

To fix this, you just need to remove

border: 1px dotted gray;

from this ul.dynatree-container to ui.dynatree.css

The code should look like this:

 ul.dynatree-container { font-family: tahoma, arial, helvetica; font-size: 10pt; white-space: nowrap; padding: 3px; margin: 0; background-color: #CCCCCC solid 1px; /*border: 1px dotted gray;*/ overflow: auto; height: 100%; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; } 

Or just delete the dotted

border: 1px gray;

+2
source
 /* Prevent focus frame */ .fancytree-container:focus { outline: none; } 

From CSS BootstrapTheme.

0
source

Source: https://habr.com/ru/post/1434126/


All Articles