Problem with input field borders in Firefox when displayed within table cells

Demo

When clicking on any cell in the table within the JSFiddle using Firefox, you may notice that the bottom and right borders are hidden. Is there a clever solution to overcome this issue?

I have experimented with a few approaches but none of them worked as expected:

  • One attempt was to add padding-right: 3px to reveal the right side of the blue border, followed by border-right: 3px to account for the added padding. However, this led to conflicts between the border and background-color styles.
  • Another approach involved reducing the width and height of the input field by a few pixels when td input:focus. Unfortunately, this conflicted with my requirement of having the width set to 100% due to resizable columns (not included in the JSFiddle for simplicity).
javascripthtmlcss

Answer №1

Based on what I've seen, box-shadow seems to be much more dependable and versatile compared to outline ;)

input:focus {
    box-shadow: 0 0 0 2px blue inset;
}

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

Tips for placing a div within a curved div?

I've got a nested div situation, <div style="background-color: red; height: 100px; width: 100px; border-radius: 10px;" id="div1"> <div style="background-color: orange;" id="div2"> testing </div> </div ...

javascripthtmlcss

Using Django ajax doesn't function properly when it's in a separate file

My Django site utilizes AJAX to handle requests. Initially, I had the JavaScript code embedded within the HTML document using <script>...</script>, which worked perfectly fine. However, when I decided to move the JavaScript to a separate file, ...

javascriptajaxdjangopost

Using ObjectIDs in MongoDB may be successful, however, it may not function properly in Mongoose

The desired effect is successfully achieved by the first code snippet shown below: //in mongodb console: db.collection.update({"username":"name"}, {$pull : { "task" : { "_id" : ObjectId("55280205702c316b6d79c89c")}}}) However, the second code snippet wri ...

javascriptnode.jsmongodbmongoose

Watching the $scope variable using $watch will result in triggering even when ng-if directive is used, displaying

Encountering an unusual behavior in AngularJS that may appear to be a bug, but there could be a logical explanation. A certain value is being passed to a directive as an attribute. Within this directive, the parameter is being watched using $scope.$watch. ...

javascriptangularjsangularjs-directive

What is the method for creating a URL (link) that simulates entering text into a text box and then pressing a button?

There is a button on a 3rd party homepage that goes by the code: <INPUT class="widget-content" TYPE="TEXT" onchange="javascript:document.foo.submit();" NAME="RegExRef"> I am looking to automate the task of populating the text box and clicking the b ...

htmlurl

How can we implement intricate looping mechanisms in hogan js?

Currently, I am in the process of familiarizing myself with expressjs. In my journey to learn this technology, I have encountered a controller that performs queries on a database and returns a JSON object with certain key-value pairs. An example of such an ...

javascriptjsonnode.jsexpresshogan.js

Is it possible to maintain component data in Angular while also incorporating dynamic components?

All the code you need can be found here: https://stackblitz.com/edit/angular-keep-alive-component?file=src/app/app.component.ts Is it possible to maintain the state of entered values when switching components? I am currently utilizing dynamic component r ...

javascriptangulartypescript

Prevent identical values from being added repeatedly to a table while updating in real-time

Currently, I am facing an issue while running through a loop to extract values from an array. When I add a second value, it duplicates both the new and previous values in the table. For example, adding a row with value 488 works fine: <tr class="exe"& ...

javascriptjquerynode.jsexpress

Issue with the div elements not aligning next to each other

I am facing an issue with my code in blade.php where I need to display images. The ideal layout would be to have the images stacked side by side within a div element, but unfortunately, it's not working as expected. I have tried using flex, bootstrap ...

htmlcss

Setting fixed width for table headers in Bootstrap 3

Can someone explain why the width of "th" is not fixed and new line breaks occur when the content is too big? Currently, the "th" width expands. How can this be fixed? The width of my first column is col-lg-2. Click here for an example image ...

htmlcsstwitter-bootstrap-3html-table

Retrieve the height of an element containing images, even if the images have not finished loading

After making an Ajax call and inserting some HTML code, I require the height of the newly added div in the Ajax callback. However, the issue arises because the HTML from the Ajax call contains elements like images that need to be loaded first. I have crea ...

javascriptjqueryajax

The Lerna command for adding packages fails with an error message stating that the packages are not related

Currently, I am utilizing lerna to manage a multirepo containing interrelated packages. This issue only arose after installing a new operating system. Whenever I attempt to utilize lerna add to add a dependency from one package to another, an error occurs ...

javascriptnode.jslinuxnpmlerna

What is the proper way to ensure a flex item takes up 50% of the space when a gap is included in

It appears that I have misunderstood something about flexbox and am struggling to resolve the issue correctly. In my current setup, I have a flexbox container with four columns as its direct children. I want each .flexbox-item to take up 50% of the contai ...

htmlcssflexbox

jQuery UI Slider is malfunctioning (code example included)

I've implemented a jQuery UI slider on my website, and it's functioning quite well. You can check out the slider HERE. However, I've noticed that when I click on 'back to the top', the page smoothly scrolls up. But when I use the ...

javascriptjqueryjquery-uisliderscroller

Guide to embedding a qr code within a pdf document

I've been working on creating a PDF file generation feature where users can download the PDF with a QR code embedded in it. While I've successfully implemented the PDF generation part, I'm facing an issue with adding the QR code to the file. ...

javascriptreactjspdfqr-code

Error in onchange event due to incorrect index variable

My goal is to add onchange events to select tags within a div that contains multiple tags. To achieve this, I am using a for loop to attach events to each tag. The purpose of these events is to update a select tag in another container by removing the "disa ...

javascripthtml

Save the output of my Java function into a JavaScript variable

I have created a web application using JSP, CSS and HTML. The page contains six buttons, each of which calls a JavaScript method. For instance, the first button triggers the par() method. <html> <head> <title>Welcome d To Student Unive ...

javajavascripthtmlcss

Effective Ways to Add Space Between Label and Textfield in React Using MaterialUI

Recently delving into the realm of React/MUI, I am faced with the challenge of crafting a login form that showcases a table-like structure where labels and TextFields align on the same row. A key requirement is to ensure equal spacing in the label column t ...

cssreactjsmaterial-ui

The table's width exceeds the appropriate size

Take a look at the code snippet below <%-- Document : index Created on : Feb 7, 2014, 1:03:15 PM --%> <%@page import="java.util.Map"%> <%@page import="java.util.Iterator"%> <%@page import="analyzer.DataHolder"%> <%@p ...

javahtmlcssjsp

Is there a way to use jQuery draggable to move a zoomed image within a div clipping mask?

Looking to enhance user experience, I am developing an interface that allows users to zoom in on an image and move the zoomed version within a clipping mask div. I have created a div with dimensions of 200px by 200px and set overflow: hidden. Then, I inse ...

jqueryhtmldraggableclipping