Oracle Apex - Highlight Item On Focus | Change Item Background Color on Focus

Oracle Apex - Highlight Item On Focus | Change Item Background Color on Focus

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.

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;
}