Adjust the cell background shade to make it darker (not affecting the entire row)

I have a table with stripped rows, where some cells are editable. However, the varying sets of editable cells per row can be confusing for users. To make it clearer, I want to provide visual feedback when cells are editable. All editable cells have an .editable class on the td element. I've experimented with two approaches:

  • Adding borders to editable cells: This was unsatisfactory because the border didn't fully enclose the cell, making it look unattractive and incomplete.
  • Changing the background color of editable cells: While effective in indicating editable areas, it disrupted the striped design of the table and looked unpleasant.

My attempt with borders:

https://i.sstatic.net/cIreG.png

My attempt with background colors:

https://i.sstatic.net/gjKHL.png

I'm looking for a way to subtly darken the background of editable cells while maintaining the stripped style of the table. This will provide clear visual feedback without compromising the overall design.

How can I achieve this effect using a "filter" or similar technique to slightly darken cells with the editable class?

htmlcss

Answer №1

To achieve a semi-transparent color, you can utilize the RGBA format in CSS:

.custom-background {
  background-color:rgba(255, 0, 0, 0.5);
}

In this case, the color is red with 50% opacity. Check out the live demo here: JSFIDDLE

Answer №2

When using the specific class as a CSS selector, you can easily customize the background colors like shown below:

td.editable:nth-child(odd) {
  background-color: #F4F4F4;
}
td.editable:nth-child(even) {
  background-color: #EEE;
}

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

javascript include new attribute adjustment

I am working with this JavaScript code snippet: <script> $('.tile').on('click', function () { $(".tile").addClass("flipOutX"); setTimeout(function(){ $(".tile-group.main").css({ marginLeft:"-40px", widt ...

javascriptjquerycssclass

Increased height of iPad screen in landscape mode with no body content displayed (iOS7)

The issue: An unusual problem occurs when the specified URL is loaded on an iOS7 iPad in landscape mode; a vertical scrollbar appears. There is absolutely no content within the body, and it seems to be adjusting the body/html margin/padding. It should be ...

cssipadios7landscape

Having trouble with the HTML5 canvas for loop not rendering the initial object in the array?

Essentially, I'm attempting to iterate through each letter in a text string (specifically the text "marius"). However, there's an issue where the first letter is not being displayed. When the text is "marius", only "arius" is drawn. I've exh ...

javascripthtmlcanvas

Internet Explorer is unable to recognize the .less file format

I have created a less file that works perfectly in Chrome and Firefox, but it is not being recognized in IE 9. Does anyone have suggestions on how to make it run in IE 9.0? Below is a sample of the CSS code: @import "../core/variables.less"; @import "Mi ...

cssless

Guide on traversing to various sections within a single page with Vuetify

I attempted to use HTML anchors to achieve this: <ul> <li><a href="#dashobard">Dashboard</a></li> </ul> Here is what my target looks like: <v-card id="dashboard"> <v-card-text class="document"> Con ...

htmlvue.jsvuetify.js

Adjust the dimensions of the react-dropdown-tree-select element to better fit your needs

Hey there, I'm a beginner web developer currently working on a tree-based dropdown menu. Check out the documentation here To see it live in action, visit the example here I'm trying to adjust the height and width of the "Search/DropDown bar" in ...

cssreactjsreact-dropdown-tree-select

What are the reasons for avoiding placing CSS code directly within HTML?

Situation: My website is dynamically served, with all CSS and javascript directly embedded into the HTML document to optimize speed. Advantages: Reduces web requests Fewer files downloaded Speeds up webpage loading time Disadvantages: Potential cachin ...

javascripthtmlcss

Tips for arranging accordion buttons side by side so they all expand into a single element

I'm currently working on a unique accordion design where multiple buttons expand into individual areas below when clicked. The standard accordion layout isn't quite what I'm aiming for. I envision the buttons all in a row, and when clicked, ...

javascriptcssaccordion

Generating dynamic dropdown menus and text content by extracting information from a database

Trying to wrap my head around dynamically generating elements on a page from a database and adding them to a table element. I know I can use jQuery for this, but I'm not sure if I should pre-build the data and show/hide it as needed. First, I have a ...

phpjqueryhtmlcsstwitter-bootstrap

How can I maintain text alignment when it wraps around a floated element?

Currently, I am working on a responsive website project. In the example code provided, I have set the width of the container div to a fixed value to highlight a specific issue. The problem arises when the text wraps onto multiple lines and extends beyond ...

htmlcss

Transmitting JSON securely to a server using an HTML form webpage

Currently, I have an HTML page with a form that communicates with a server using JSON requests. The purpose is to load user's previous answers upon loading and save new answers when the submit button is pressed. Each user has a unique user_id attribut ...

javascripthtmljson

Div that adjusts according to the width of an image

I have some images of a laptop and a tablet displayed on my webpage. The issue I am facing is that the div above the laptop should always match the width of the laptop. Everything looks great at full width, but problems arise when I scale down the window s ...

cssbootstrap-4css-positionresponsive

Ensuring consistency in aligning float elements

I've been struggling to create a concept design for my internship project. I aim to have a page with six clickable elements (images). When one is clicked, the others should disappear and the active one moves to the top. I managed to achieve this using ...

javascriptjqueryhtmlcss

An error was thrown: Unexpected identifier found within the headers of my fetch request

When I try to run the server, it runs successfully. However, my Chrome console shows errors in the headers and does not execute the "add to cart" functionality. I have refreshed the page multiple times and even restarted the server, but the issue persists ...

javascriptpythonhtmldjangoe-commerce

Explore the hidden route of the input components

HTML: <div id="quiz"> <div id="question"> <p id="quiz-txt">What is your favorite color?</p> <ul id="quiz-opt"> <div id="ans"> <input type="checkbox" id="Red" value="Red" class="options"> ...

javascriptjqueryhtmlcheckbox

The image remains unchanged in the JavaScript function

My attempt to swap images using jQuery has hit a snag. Upon running the page, it appears that the chase() method finishes executing before the animation has completed. The goal was to create an illusion of chasing between two images by repeatedly replaci ...

javascriptjqueryhtml

Remove all content within a div element while preserving any plain text using jQuery

So, I'm facing a challenge with divs within a form: <div id="foo"> <div>koko</div> <div>lala</div> Plain text here <div>Another div</div> </div> My goal is to utilize jquery to preserve the "Plain text ...

jqueryhtmldom

Is there a way to use PHP to calculate the number of lines in an HTML code?

After using a WYSIWYG-editor (WordPress) to generate HTML content, I am seeking a way to display a preview of this HTML by showing only up to 3 lines of text in HTML format. For example: <p>Hello, this is some generated HTML.</p> <ol> ...

phphtmlregexsimplexml

Building a floating video player using React

I recently installed the React-Player module and it is functioning perfectly. However, I am encountering some difficulties in trying to embed the player within an Element so that it appears as a floating player across my application, regardless of the page ...

javascriptcssreactjsreact-player

Display all nested <ul> and <li> elements inside an <li> tag by utilizing jQuery

I have a complex nested tree structure of 'ul' and 'li' elements. In one instance, I need to display specific 'li' items based on a certain name while hiding the rest. Here's an example of the tree: branch1 twig1 l ...

javascriptjqueryhtml