0

Can someone help me in changing the color of onclick selected text in kendo angular grids.Please find the image attached below.

Aakash N
  • 61
  • 1
  • 7
  • can you share some code on what you tried? – Poul Kruijt Aug 07 '17 at 12:50
  • .k-grid td.k-state-selected:hover, .k-grid tr:hover { color: #353535; background-color:#BFCCDD; } .k-grid-header .k-header { background-color: #ffb91d; font-size: 13pt; } .k-pager-numbers .k-link.k-state-selected, .k-pager-numbers .k-link:link.k-state-selected { color: #353535; background-color: #ffb91d; } }--- I tried to change the CSS of the Kendo Accent, all worked expect the selected text color. – Aakash N Aug 07 '17 at 13:11

1 Answers1

1

::selection is the property you are looking for to change the selected text color (see this answer for more details).

To get this to apply to your kendo grid, use the following CSS:

.k-grid ::selection {
  background-color: #3399FF;
  color: #fff;
}

If you are still having trouble, make sure you are applying your CSS to the global scope. Because of style encapsulation, this is the easiest way to affect the styling of a third party component such as the Kendo grid.

Note: I chose this blue #3399FF with white #fff text to change the highlight color back to the standard for internet explorer. See this answer for more details about the default colors for various broswers.

Craig F.
  • 11
  • 3
  • While this code snippet may be the solution, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-%E2%80%8C%E2%80%8Bcode-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – Narendra Jadhav Jul 11 '18 at 05:01
  • Thanks for the comments! I'll add some more information on the answer for future developers. – Craig F. Jul 11 '18 at 21:12