Here I will share two examples to change an item's background color (highlight) on focus in Oracle Apex.
Highlight Item on Focus in Oracle Apex
Below, the first example is using jQuery. You need to put the below code into the Execute when page loads section. Now when the user navigates from one field to another, the field's background color will change to yellow.
Example 1: Change The Item Background Color Using jQuery in Oracle Apex
$('input').on('focus', function() {
$("#"+this.id).css("background-color", "yellow");
}).on('blur', function() {
$("#"+this.id).css("background-color", "white");
});
Example 2: Highlight Page Item Using CSS
The following CSS will highlight the page item by setting its background color and adding the shadow. Copy and paste the below CSS code in the Inline CSS Section of the page:
input[type=text], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
background-color: white;
}
input[type=text]:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
background-color: yellow;
}
