The Firefox form is experiencing issues when the cursor is set to 'move'

I have an HTML form with a specific code snippet:

    #stoppage_section .stoppage{
        cursor: move; /* fallback if grab cursor is unsupported */
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
    }
    <div id="stoppage_section">
      <div class="stoppage">
         <input class="form-control" ....>
      </div>
      <div class="stoppage">
         <input class="form-control" ....>
      </div>
    </div>

I am looking to have the cursor display as a 'move' icon when the user navigates within the 'stoppage_section' area. However, I want the cursor to function normally when it hovers over input fields.

This code works correctly in Chrome, but there is an issue in Firefox where the input fields become uneditable.

Desired Outcome

The desired behavior is for the cursor to show a 'move' icon when over a div and to function normally when over input fields.

I am currently using Mozilla Firefox Version 48.0.2. The latest version is not suitable for me due to the changes in Firebug's appearance, which I find displeasing.

javascriptjqueryhtmlcss

Answer №1

Is this what you're looking for?

    .stoppage {
        background-color: #dddddd; /* sets the background color of the div */
    }

    .stoppage:hover {
        cursor: move; /* changes cursor when hovering over the div */
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
    }
    <div id="stoppage_section">
      <div class="stoppage">
         <input class="form-control" ....>
      </div>
      <div class="stoppage">
         <input class="form-control" ....>
      </div>
    </div>

Answer №2

The code is functioning correctly on my end as well. However, if you're looking to provide a backup option for Mozilla browsers, you can easily incorporate the following style along with your current one:

.stoppage input:hover {
    cursor: edit; //display edit cursor when hovering over input box
        }

Answer №3

When you hover over text and an outside input text on the same line, you may notice a hand cursor.

#stoppage_section .stoppage{
    cursor: move; /* backup if grab cursor is not supported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
<div id="stoppage_section">
  <div class="stoppage">
     Input Text
     <input class="form-control" ....>
  </div>
  <div class="stoppage">
     Input Text
     <input class="form-control" ....>
  </div>
</div>

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

Adding a half circle connector in HTML can be accomplished by using SVG (Scal

My task is to replicate the construction shown in this image: https://i.sstatic.net/kaRMO.png I have written the entire code but I am unsure how to include a half circle next to the full circle and connect it with a line connector. Here is my code: .ps- ...

javascripthtmlcss

How can I define a schema attribute for a controller in Express JavaScript?

Hello, I am brand new to exploring stack overflow and the world of development. I have been self-teaching myself how to code using React and Express, so please forgive me if my question seems basic or implausible. I still have many fundamental gaps in my k ...

javascriptexpressmongoose

What is the best way to activate an input field in react-select?

Currently, I am working on a dropdown feature using react-select and have encountered some issues that need to be addressed: 1) The input field should be focused in just one click (currently it requires 2 clicks). 2) When the dropdown is opened and a cha ...

javascriptreactjstypescriptreact-select

Retrieving a file URL from Sanity within a blocks array

I've been working on a website with Next JS and using Sanity as the CMS. While Sanity has schemas for images, I ran into an issue when trying to handle videos. The documentation recommends using GROQ queries to convert file URLs at the request level, ...

javascriptnext.jssanitygroq

Repetitive NodeJS event triggers within Electron-React application causing unexpected behavior

In my custom software package (referred to as PACKAGE_A), I have implemented various automated tasks using a node script. This package includes a Notifier module that creates and exports an EventEmitter. (The entire project is structured as a Monorepo) co ...

javascriptnode.jsreactjseventselectron

Creating Typescript libraries with bidirectional peer dependencies: A complete guide

One of my libraries is responsible for handling requests, while the other takes care of logging. Both libraries need configuration input from the client, and they are always used together. The request library makes calls to the logging library in various ...

javascriptnode.jstypescriptnpmpeer-dependencies

Tips for positioning Bootstrap form labels and input fields in alignment

Currently, I am enhancing bootstrap-4 forms that consist of multiple input fields and labels. The form is functional, but I aim to elevate its visual appeal and user-friendliness. Working Snippet <link rel="stylesheet" href="https://stackpath.bootst ...

htmlcssbootstrap-4

List of items displayed in alphabetical order using the ng-repeat directive:-

I'm working with an ng-repeat block in the code snippet below. My goal is to have the placeholder [[THE ALPHABET]] render as a, b, c, d representing bullets for the list in their respective order. There will always be 4 values present. What would be t ...

javascriptangularjsangularjs-ng-repeatalphabet

Unleashing the y-axis and enabling infinite rotation in Three.js

In my three.js project, I am utilizing orbital controls. By default, the controls only allow rotation of 180 degrees along the y-axis. However, I would like to unlock this restriction so that I can rotate my camera infinitely along the y-axis. As someone ...

javascriptthree.js

JavaScrip $("").text(); is a straightforward way to recognize and extract

At the moment, I am utilizing the jQuery script below: $("TD.info > font").text(); when this specific HTML structure is present on a webpage: <td class="info"> <font> 3001474535 </font> </td> I had the idea to tweak t ...

javascriptjquery

Adjust color in real-time with JavaScript

I am using a json file to store data for generating a diagram, and I want to change the color of the diagram conditionally based on an attribute in the json. If the attribute is false, the color should be red, and if true, it should be green. Here is a sni ...

javascripthtmlcssjsonangular

Keep your filter content up-to-date with real-time updates in Vue.js

I am facing an issue with a markdown filter where the content of component.doc is set to update through a websocket. Despite updating the scope's component, the filtered content remains unchanged. Is there a way to dynamically refresh the v-html in t ...

javascriptvue.js

A guide to sharing session variables with express views

Struggling to access session variables in EJS views and encountering various challenges. To locally access req.session, I've implemented middleware as outlined in this guide on accessing Express.js req or session from Jade template. var express = re ...

javascriptnode.jsexpressexpress-session

Verify if the JSON response contains any data

When the JSON response is empty and viewed in the browser console, it appears like this: {"data":{},"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://url/form/BN217473" ...

javascriptangularjs

Ways to overlook concealed elements within a Bootstrap Button Group

Within my button group, there are 10 buttons. On certain screen widths, using media queries for responsiveness, I hide some buttons. The issue arises when the last button is hidden - the rounded edges of the succeeding visible button are not maintained. ...

csstwitter-bootstrap

`I am experiencing issues with my PHP Ajax call.`

I ran into an issue when trying to execute the following code. Despite trying every method I know, I couldn't get it to function properly. AJAX Call var result = $(this).prop("checked"); var item_id = id; $.post('maintenanceControl.php', { ...

phpjqueryajax

Combining two elements in a React application

Having a collection of assets and their quantities: const bag = { eth: 50, btc: 30, kla: 10, set: 5, ova: 5 }; const assetList = { eth: { name: "Ethereum", icon: "urlhere", colour: "#030", text: "light&q ...

javascriptreactjsobject

What is the process for storing a particular model in a designated collection within MongoDB's database?

I am working with three different models: user, teacher, student. All of these are stored in the database under the users collection. However, I want to save the student model in its own separate collection called students, instead of mixing it with the us ...

javascriptnode.jsmongodbexpressmongoose

Tips for presenting random images from an assortment of pictures on a webpage

I'm looking to enhance my website by adding a unique feature - a dynamic banner that showcases various images from a specific picture pool. However, I'm unsure of how to find the right resources or documentation for this. Can you provide any guid ...

javascripthtmlcssangular

ajax.php form connected to a database using php

Introduction: I am currently working on a server-side datatables library. The code snippet below is not displaying either $stmt or $row, making it difficult to identify the issue. It's frustrating because I was hoping to troubleshoot this without see ...

phpjqueryajax