Alter the background color of the text input when it is selected for exit

How can I adjust the input field color when text is selected? I'm looking to get rid of the dark grey box highlighting.

(Check out the image below)

https://i.sstatic.net/OgWaz.gif

<div id="ember1102" class="ember-view">

   <i class="fa fa-pencil fa-lg editable-row-input-right" style="display:inline-block;  " data-ember-action="1103"></i>
   <input id="alternate-name-1-265140" type="text" class="pure-input-1 pure-input-inline editable-row-input-left ember-view ember-text-field" disabled="">

</div>

The CSS code is too long to include here, but here is an excerpt:

.pure-input-1.pure-input-inline.editable-row-input-left {
    display:inline-block;
    min-width: 0px;
    cursor: text;
    
    &:disabled{
        color:inherit;
        background-color: inherit;
        padding-right: 20px;
        
        &:hover{
            background: inherit !important;
        }
        
        &:focus{

        }
    }

    &:enabled{
        color:inherit;
        background-color: white;
        
        &:focus{
            background: white !important;
            border: 2px solid $ecm-dark-blue !important;
        }
        
        &:hover{
            background: white !important;
        }
    }
}

I've tried changing all the color attributes in Chrome DevTools without success in altering the background color. Additionally, I experimented with 'background' and '-webkit-highlight' properties.

Answer №1

The reason for the dark grey background (or lighter on hover) seems to be a result of a combination of states being applied. To determine which classes are toggled on hover/blur, inspect the element in the console. In Chrome, you can right click on the element in the inspector and manually simulate :hover and :focus states. This process may help identify the specific CSS rule or class responsible for the styling. It's important to ensure that the CSS rules active during :focus:hover remain even when :hover is not true. Consider using an !important declaration if necessary.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing animation during mouse hover off

I've been experimenting with using 'translate3d' and 'transition' on hover to animate a div into view. While the animation works smoothly when hovering over the element, I'm having trouble getting it to transition back out of ...

Exploring the power of Angular Js $httpParamSerializer alongside jQuery's $.ajax

Currently, I am in the process of developing an Angular.js application where I need to send a POST request to a PHP server. The data that needs to be transmitted is in the format of nested objects. Here is an example of the data structure: var data = { ...

I'm currently utilizing CSS GRID to create a map layout, but I'm encountering an issue where the layout is not filling the entire screen. I'm wondering how I can achieve this in Angular

Here is the unique html code snippet for a layout that dynamically creates grids using json input: <!DOCTYPE html> <html lang="en"> <head> <title>Booking Page</title> </head> <body> <div ...

What is the process for including an item in an array within Firestore?

Can someone help me with this code snippet I'm working on: await firebase.firestore().doc(`documents/${documentData.id}`).update({ predictionHistory: firebase.firestore.FieldValue.arrayUnion(...[predictions]) }); The predictions variable is an ar ...

What is the best way to retrieve the index of the chosen option from a select element in Angular when

My Angular application includes a simple <select> element using Material design: <mat-form-field> <mat-label>Type</mat-label> <mat-select placeholder="Type" formControlName="type" name="type" id="name"> <mat-option ...

Having trouble aligning and resizing text and divs accurately

Hello, I'm having trouble centering my text within a div and fitting three divs inside my content area. Here is the code snippet: HTML <div id="content"> <div class="latest"> <p>Gentlemen, these are my latest works< ...

Manipulating child classes using jQuery

I am struggling to display an X icon next to a tab on my page when the tab is clicked, but I am facing difficulties in toggling its visibility. The issue arises when trying to access the span element within the tabs. $('.tabs .tab-links a').on(& ...

Utilizing the this.setState function within a callback

In my current project, I've encountered an issue with setting the state in a Twitter timeline react component. The code snippet causing trouble is as follows: componentWillMount: function() { twitter.get('statuses/user_timeline', ...

What is the process for importing module functions in Svelte when utilizing npm?

I'm having trouble understanding how to properly use imports in Svelte with npm. I have a Svelte component that I can't seem to get working. Uncommenting "//import { Configuration, OpenAIApi } from "openai";" leads to the error message: [!] (plug ...

Selecting a event from Google Places Autocomplete using a mouse click

I have successfully implemented Google's autocomplete API as per the documentation. However, I am facing an issue with a form that is submitted via Ajax every time it changes. The problem arises when using the autocomplete feature for location selecti ...

User disappears from Firebase after refreshing the page

I've encountered an issue with my Firebase login process. After a page refresh, the user authentication is lost. Even though the user data is stored in LocalStorage, it gets deleted upon refresh. const loginform = document.querySelector('.loginfo ...

Update dynamically generated CSS automatically

Is there a way to dynamically change the CSS? The problem I'm facing is that the CSS is generated by the framework itself, making it impossible for me to declare or modify it. Here's the scenario at runtime: https://i.sstatic.net/IovGr.png I a ...

Building Firestore subcollections with the latest WebSDK 9: A step-by-step guide

I'm looking to create a subcollection within my document using the webSDK 9, specifically the tree-shakable SDK. While I have come across some solutions, they all seem to be outdated and reliant on the old sdk. Just for context, I am working with Ne ...

Adjust the size of an input field in jquery or javascript based on user input

Ensure that an input text box can only contain a maximum of 13 numbers, but if the user enters a 14th number as a decimal point, then allow up to 16 numbers. HTML: <input type="text" maxlength="15" onkeyup="checkCurrency(this)"/> Script: func ...

Encountering a problem when utilizing window.ethereum in Next Js paired with ether JS

Experiencing some difficulties while utilizing the window.ethereum in the latest version of NextJs. Everything was functioning smoothly with NextJs 12, but after upgrading to NextJs 13, this error started popping up. Are there any alternative solutions ava ...

Is it possible to deceive Array.isArray?

Although I have a good understanding of prototypes, I encountered some confusion when I attempted the following: var obj = {}; Object.setPrototypeOf(obj, Array.prototype); console.log(Array.isArray(obj)); // false? What's even more perplexing: var ar ...

Tips for eliminating double quotes from an input string

I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...

Searching through text in Node JS using Mongoose for Full-Text queries

I am facing an issue while attempting to perform a full-text search on an array of strings using Mongoose. The error message I receive is as follows: { [MongoError: text index required for $text query] name: 'MongoError', message: 'text ...

Is there a way for me to extract all the elements within an object nested inside an array and then append them to another array?

I'm currently facing a challenge that's bothering me quite a bit. My skills in handling JSON data manipulation are not up to par. The problem I'm dealing with involves an array of multiple objects, each containing some data. Within these ob ...

Creating and inserting multiple objects into a table in Sails JS while bypassing any existing rows

Is there a way to insert an array of objects into a table while avoiding duplicate rows? I have a model defined as follows: //Test.js module.exports={ tableName:'test', connection: 'mysqlServer', attributes:{ id:{ type: ...