Protonz Protonz - 1 month ago 5
CSS Question

JQuery keyboard css assigning color to button (key) with certain class fails

Stack Overflowers,

I'm having a hard time with CSS, it's about assigning a color to a button with a specific class, pretty straight-forward. There is more code involved, but this is the only thing I'm interested right now, link to jsfiddle.

I want to assign the color black to the button 'a', this button has a few classes:

class="ui-keyboard-button ui-keyboard-a ui-state-default ui-corner-all"
according to Firefox' Inspector, so to assign the color black, I've tried a few things:

.ui-keyboard-button .ui-keyboard-a .ui-state-default .ui-corner-all {
color: black;
}


.ui-widget-content .ui-state-default .ui-keyboard-a


ui-keyboard-a
and
ui-keyboard-button


Nothing works and only in the two last versions is it shown in the inspector with a cross through it.

Does any of you know how to assign anything to the button? Thanks in advance!

Answer

This is happening because one of the rules in your classes declaration is overriding your rule due to css precedence.

Using color: black !important; will solve your problem, but I won't recommend this because it will bring uncertainty to your web design and might break your other web pages layout unintentionally. It is also considered as a bad design practice. However, in some cases you are free to use it.

Please refer to this post to understand when not to use !important. Learning more about CSS specificity will help you in future to harness the real power of CSS.

Here is the fiddle and the working snippet is given below.

$(function() {

  $("#keyboard").keyboard({
      visible: function(e, keyboard, el) {
        // set up clicky noise after keyboard has been rendered and visible
      },
      language: ["nl"],
      rtl: false,
      layout: 'custom',
      customLayout: {
      
      	default: [
        '',
        '',
      	'- 	a e i o u {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty}',
      	'\u2015 aa ee oo uu {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty} {empty}',
      	'{empty} a e o u {empty} {empty} {empty} {empty} {empty} t d ch g',
      	'\u2016 oe ui eu uw ie {empty} {empty} {empty} {empty} p b r l',
      	'|| au ou ei ij {empty} {empty} {empty} {empty} {empty} s z n m',
      	'||| aai ooi oei ouw auw {empty} {space} {empty} f v ng nk',
      	'|||| ieuw eeuw {empty} {empty} {empty} {empty} {empty} {empty} {empty} j w h k'
      	]
        
      }, 
      alwaysOpen: true,
      initialFocus: true,
      stayOpen: true,
      userClosed: true,
      ignoreEsc: true,
      usePreview: false
    })
    // activate the typing extension
    .addTyping();

});
button.ui-keyboard-button {
  color: black !important;
}

body {
  font-size: 20px;
}

textarea {
  width: 99%;
  height: auto;
}

#wrap {
  display: block;
  margin: 0 auto;
  height: auto;
}

.ui-keyboard {
  	/* include the following setting to place the
	keyboard at the bottom of the browser window */
	width: 99%;
	height: auto;
	left: 0px;
	top: auto;
	position: fixed;
  bottom: 0;
	/* see issue #484 */
	-ms-touch-action: manipulation;
	touch-action: manipulation;
  }

.ui-keyboard-button {
  width: 3em;
}

.ui-keyboard-space {
	width: 6em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://mottie.github.io/Keyboard/css/keyboard.css" rel="stylesheet"/>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
<div id="wrap">
<textarea id="keyboard"></textarea>
</div>