alhildreth
Design Dabbler

CSS to change Button Outline On-Focus

Jump to solution

I work for a government agency and our forms need to comply with accessibility needs. We are using classic form in Nintex for SharePoint Online. The default Nintex buttons failed approval by our section 508 testers as it is not obvious when the button has focus. The test uses the tab key to go through the form (text fields are very evident), but on buttons, the tester says he cannot see a border defining the button has received 'focus'. He will accept changing the color of the outline or making the button change color on-focus.

Anyway - he suggested using CSS to perform this. I first need to make sure my button is using my custom CSS, so I went to "Form Settings" then "Custom CSS" and my .buttonCSSTest code. Also I added a new button and under the button "Formatting" and "CSS Class" put buttonCSSTest.

It doesn't appear to have any effect on my button.

I am new to CSS and using it. I tried making a CSS to change a text box and it works as expected. The Button does not. Any ideas what I'm doing wrong? Is there something special with Nintex buttons?

.buttonCSSTest {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Thanks

0 Kudos
Reply
1 Reply
Tarf
Design Canvas Artiste

Re: CSS to change Button Outline On-Focus

Jump to solution

Hi @alhildreth,

I had to target the input element within the "button". Seems like nintex applies the class to a div surrounding the button.

To make a button using with "myClass" red use this css rule:

.myClass input { 
 background: red 
} 

to target hover, use this (makes border dashed)

.myClass input:hover { 
 border: 1px dashed black 
}

 

View solution in original post

0 Kudos
Reply