Cursor disabling effect in IE 11 causing interference with drop-down options on Twitter Bootstrap 3

Right above a disabled twitter bootstrap 'form-control' input element sits a drop-down list.

<div>
    <select>
        <option> Option 1 </option>
        <option> Option 2 </option>
        <option> Option 3 </option>
        <option> Option 4 </option>
        <option> Option 5 </option>
        <option> Option 6 </option>
        <option> Option 7 </option>
    </select>
</div>
<div class="form-group">
    <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="" />
</div>

When using Internet Explorer 11, clicking on the drop-down and hovering over options that are in front of the disabled input causes the cursor to change to a red stop sign.

Check out the demo (preferably in IE11): http://jsfiddle.net/Lrupx0ca/

This issue seems to be isolated to IE11 only. Other browsers like Chrome, Firefox, and IE10 don't exhibit this behavior. Any ideas on what might be causing this? and any suggestions for fixing or working around this problem?

htmlcsstwitter-bootstrapinternet-explorer

Answer №1

Although this response may come a bit tardy, there are still individuals in search of a resolution to this persistent issue with Microsoft.

To circumvent this problem, consider adjusting the cursor-style of the disabled input component to default. In practical terms, it would appear as follows:

.form-control:disabled {
    cursor: default;
}

Please be aware that this method serves as more of a workaround than a definitive solution to prevent unsightly dropdowns.

Answer №2

Hey there, it seems like there is an issue with cursor on disabled select in Internet Explorer.

If you want to learn more about this bug, please visit the following link:

You can also find discussions about this bug at the following link: https://github.com/twbs/bootstrap/issues/14528

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

Retrieving information received from an XML HTTP request in node.js

Currently, I am transmitting text data from a textbox to a node.js express server using XMLHttpRequest: var text = document.getElementById("textBox").value; console.log(text); var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Fire ...

javascripthtmlnode.jsexpressxmlhttprequest

Issues with jQuery Ajax sending Post data to PHP script

I've been attempting to transfer variables from my JavaScript to a PHP file using AJAX, but for some reason, it's not functioning as expected. Despite researching numerous similar queries, I have yet to come across a solution. Here is an excerpt ...

javascriptphphtmlajax

Identify a specific HTML template using jQuery

I am currently working on implementing datepickers in various HTML templates. The issue I am facing is that the functionality only seems to work in my index.html file. When I try to replicate the same setup in another template, it does not function proper ...

jqueryhtml

Finding dynamic elements with Selenium WebDriver is an essential skill for any automation tester

<div id="button" data-testid="widgetButton" class=" chat-closed mobile-size__large"> It seems there is an issue with locating elements that have special characters in their names. I'm attempting to click on a specific item, but I've tried ...

javahtmlseleniumselenium-webdriverselenium-ide

Ways to align an image and text vertically next to each other within a div

After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically. View My ...

htmlcss

Limit access to a page only to designated users

Having a challenge creating a secure page for band members to access their individual band pages. In the band table, each band has four columns labeled $bandm1, $bandm2, $bandm3, and $bandm4. I attempted to create a script that extracted the session user ...

phphtmlmysqlrestricted-profiles

I'm currently facing an issue with toggling the visibility of a div using JavaScript

In my attempt to create a unique custom select menu using html, css, and javascript, I encountered an issue with toggling the display style of the div containing the options when clicking on the button (in this case, an arrow). HTML: <ul class="de ...

javascripthtmlcss

Disregard IDs when linting CSS in ATOM

Is there a way to configure csslint in Atom to exclude "ids" and prevent the warning "Don't use IDs in selectors" from appearing? Update: Despite my question being flagged as potentially duplicate, I delved deeper in my own research and ultimately fo ...

csshtmlatom-editorcsslint

Identifying mouse proximity through processing.js

I am using processing.js for coding. I am trying to dynamically adjust the size variable so that it increases as the cursor approaches the ellipse and decreases as the cursor moves away from it. I also want to set a limit for the size, preferably between 5 ...

javascripthtmlprocessingprocessing.js

Toggle button color on click by using ng-click on a different button

As a newcomer to Angular, I am facing an issue. I have two buttons - button1 and button2. What I want is that when I click on button1, its color changes from green to red. Then, when I click on button2, the color of button1 should revert back to green. How ...

javascripthtmlangularjs

What is the best approach for implementing a CSS reset across multiple websites with different content?

As I work on a page that will be displayed across numerous websites beyond my control, shown within a jQuery UI dialog window using $.load(), the content is vulnerable to the CSS directives set by each individual site. To prevent conflicts, I have made sur ...

css

React Native tutorial: Changing button color on press

When a user clicks on the TouchableOpacity element, I want to change the color of the button from the default gray to blue. Initially, the 'checked={this.state.newProjects}' newProjects variable is not present in the state, so when clicked it sho ...

javascriptcssreactjsreact-native

Even with a highly lenient Content Security Policy in place, I continue to encounter violation errors

I currently have this meta tag in my HTML document: <meta http-equiv="Content-Security-Policy" content="default-src *;script-src *"> My project uses ParcelJS as a bundler. Everything works smoothly when using the development serv ...

htmlcontent-security-policy

Prevent border duplication in CSS and retain border visibility

Check out this fiddle where I have three divs with a border-width of 2px. Originally, the issue was that each div's border gets duplicated in between, resulting in a total border-width of 4px. To solve this, I applied a margin-top of -2px to each div, ...

htmlcssborder

I'm currently working on building a form with the Angular framework, but I'm facing a challenge in displaying all the

I am having trouble with my Angular form as I am only able to display two fields when the page is loaded. Code snippet from Component.html: <div class="card m-3"> <div class="card-body"> <form [formGroup]="surveyFor ...

htmlangular

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

javascripthtmlreactjsgatsby

Instructions for integrating AJAX into a PHP script

I am looking to incorporate AJAX into my PHP file so that when I delete an item from a list, the data automatically reloads and the list is updated with the new information. I have created a list of all my data along with a delete button. Below is the PH ...

phphtmlajax

Navigate to a specific hidden div that is initially invisible

Currently, I am working on a web chat application using next.js. The app includes an emoji picker button, which, when clicked, displays a menu of emojis. However, the issue I am facing is that the user has to scroll down in order to see the emoji menu. I a ...

javascriptcssreactjsscrollnext.js

JavaScript tool for connecting tags with JSON properties

As a beginner in JS, I am curious if there exists a JS library that can help bind html fields to a JS object. For example: <div class="js_source"> <input field="name" /> <input field="surname" /> <button type="button">S ...

javascriptjqueryhtmlbind

Assist me in temporarily altering the color of menu items in a sequential manner upon the page's loading

Currently, I'm working on a website that features a subtle dark grey menu at the top of every page. The menu is built using HTML and CSS with a list structure. To highlight the corresponding menu item based on the current page, I am utilizing the ID a ...

htmlcssmenuonload