Disable the default form input reset button generated by Internet Explorer 10

Just have one field form for search input. Below is the HTML code:

            <form class = "search-form hide-on-mobile">
                <input class = "global" type = "text" placeholder = "Who are you looking for ?">
                <button class = "search-reset hide-on-mobile hide-on-tablet" type = "reset" value = ""><i class = "clear-search"></i></button>
            </form>

and corresponding CSS :

::-webkit-input-placeholder { color : #FFFFFF; }
:-moz-placeholder { color : #FFFFFF; }
::-moz-placeholder { color : #FFFFFF; line-height : 32px; opacity : 1; }
input:-ms-input-placeholder { color : #FFFFFF; }

.search-form input[type="text"] {
background         : #78C1DC url("../img/search-icon.png") no-repeat 10px 6px;
border             : 3px solid #61A8C4;
color              : #FFFFFF !important;
font-size          : .8em;
height             : 42px;
padding            : 0 0 6px 40px;
width              : 100%;
-webkit-box-sizing : border-box;
-moz-box-sizing    : border-box;
box-sizing         : border-box;
-webkit-box-shadow : none;
-moz-box-shadow    : none;
box-shadow         : none;
-webkit-appearance : textfield;
-moz-appearance    : textfield;
-webkit-appearance : textfield;
appearance         : textfield;
-webkit-transition : ease-in 200ms; -moz-transition : ease-in 200ms; -ms-transition   
    : ease-in 200ms; -o-transition : linear 200ms; transition : ease-in 200ms;
    }

.search-form input[type="text"]:focus {
border              : 3px solid #006687;
background          : #6BB2CD url("../img/search-icon.png") no-repeat 10px 6px;
box-shadow          : none;
color               : #FFFFFF;
font-size          : .8em;
outline             : none;
padding            : 0 0 6px 40px;
text-shadow         : 1px 1px 1px rgba(0, 0, 0, 0.5);
-moz-appearance     : textfield;
-webkit-appearance  : textfield;
appearance          : textfield;
-webkit-text-shadow : 1px 1px 1px rgba(0, 0, 0, 0.5); -moz-webkit-text-shadow : px    
    1px 1px rgba(0, 0, 0, 0.5); -ms-webkit-text-shadow : px 1px 1px rgba(0, 0, 0, 0.5);  
    -o-webkit-text-shadow : px 1px 1px rgba(0, 0, 0, 0.5); webkit-text-shadow : px 1px  
    1px rgba(0, 0, 0, 0.5);
-webkit-transition  : ease-in 200ms; -moz-transition : ease-in 200ms; -ms-transition 
    : ease-in 200ms; -o-transition : linear 200ms; transition : ease-in 200ms;
    }
.search-form button[type="reset"] {
background         : #6BB2CD;
box-shadow         : none !important;
border             : none;
border-radius      : 40px;
color              : #FFFFFF;
font-size          : 10px;
position           : relative;
-moz-appearance    : none;
-webkit-appearance : none;
appearance         : none;
top                : -32px;
right              : 20px;
float              : right;
width              : 20px;
height             : 20px;
}

Works fine on most browsers, but when looked at in IE 10, an extra reset button unexpectedly appears when the input field is focused. Any idea what's causing this?

Thanks,

htmlcssinternet-explorer-10

Answer №1

Give this a shot 

.global:-webkit-clear {
    visibility: hidden;
}

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

Is there a way to maintain scroll position on a dynamically refreshing div?

After searching for hours, I still can't find a solution to my problem. I am using a simple JQuery script to refresh a div and display my PHP output in it. $script = " <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery ...

javascripthtmlajaxscroll

Achieving an oval shape using HTML5 and CSS3: Step-by-step guide

<!DOCTYPE html> <head> <title> Oval shape</title> </head> <body> <div style="width:400px; height:400px; background-color:#ff0;">Oval</div> <p> Exploring the creation of an oval shape using HTML5 ...

htmlcsscss-shapes

Minimize the expansive width of Shiny Dashboard's sidebar for

I'm facing a challenge in hiding a shinydashboard sidebar with a wider width. Upon increasing the width, however, the sidebar isn't completely disappearing from the screen. Here's an example that illustrates the issue I'm trying to add ...

htmlcssrshinyshinydashboard

Activate simultaneous HTML5 videos on iOS devices with a simple click

I am currently in the process of developing a webpage that will play various videos when specific elements are clicked. Although the functionality works perfectly on desktop computers, it encounters an issue on iOS devices. The problem arises when the elem ...

javascriptjqueryhtmlvideoios5

Alignment problem with email signatures on MAC devices

Recently, I designed a straightforward email signature and successfully copied and pasted it into the appropriate section. However, while it works perfectly in Outlook, there is an issue with MAC Mail (Version 7.3) where the image extends beyond the table. ...

htmlcssmacosemailsignature

Completing a third-party htaccess file

What's the best way to create a nodejs script that periodically monitors a 3rd-party website, but encounters issues with a username and password prompt generated by .htpasswd/.htacces authentication? How can nodejs handle this situation? ...

htmlnode.js.htaccessscrape.htpasswd

Combining CSS documents

In order to improve page load speed, I need to consolidate multiple CSS files into one large file. Will the styles function properly if I merge them all together, or are there potential issues when combining multiple CSS files? My software is built in Ja ...

javacssmerge

Verify if spacebar is pressed and then use jQuery to add a hashtag with multi-language support

I am attempting to use jQuery to add a hashtag (#) after the user types and presses space. I have created a demonstration on CodePen. In this demo, when you type something like (how are you), the JavaScript code will change it to (#how #are #you). To ach ...

javascriptjquerycssregexmobile

Struggling to make JavaScript read JSON data from an HTML file

I am currently working on developing a word search game using django. One of the tasks I need to accomplish is checking whether the entered word exists in a dictionary. To achieve this, I have been converting a python dictionary into JSON format with json. ...

javascriptpythonhtmljson

When hovering over an image, CSS text will be displayed

Creating a CSS hover effect where text appears when the user hovers over a small thumbnail and a large image is displayed upon clicking. I have set up a modal for the image, but having difficulty with positioning the text. Currently, the text is located un ...

jqueryhtmlcss

transforming unicode into regular characters prior to being presented on a webpage

I am currently utilizing the openinviter class to import contacts from emails. Sadly, it is showing Unicodes of non-English characters, like Polish, such as u0117 (and similar code types), instead of regular characters. Is there a way to convert these Unic ...

phphtmlunicode

Using the jQuery POST method to execute a redirect upon successful completion

I am attempting to utilize jQuery to create a post method. I have implemented it within a form and used bootstravalidator for validation. Once the form is successfully validated, it is posted and the PHP code comes into action. Now, my goal is to redirect ...

phpjqueryhtmlformsbootstrapvalidator

Switch the ng-bind-html option

Dealing with a string in my scope, I must determine whether I want the HTML escaped or not. A boolean value helps to decide if the HTML should be escaped or left as is. Snippet Check out some of my code examples below: $scope.result = "<b>foo</ ...

javascripthtmlangularjsng-bind-htmlng-bind

Placing a user's username within an ejs template using express and node.js

Currently, I am attempting to integrate the username into a layout using ejs templating with node and express. Below are the steps I have taken: Mongodb model: const mongoose = require('mongoose') const Schema = mongoose.Schema; var uniqueValid ...

javascripthtmlnode.jsexpressejs

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

Center a sans-serif font vertically with exact precision while adjusting the font size

My issue is an expansion of a previous problem I mentioned in another question, which can be found here Vertically align sans-serif font precisely using jquery/css. To summarize: I am aiming to align two divs containing text, with one positioned above the ...

javascriptjqueryhtmlcssfonts

What is the best way to adjust a wide HTML table to make it narrow enough to fit perfectly within the screen width?

I need assistance with formatting an HTML table that contains multiple columns: <table id="req_header" border="2" style="overflow: auto;"> <tr> <th><i class="fa fa-solid fa-check"> ...

javascripthtml

Collaborate on sharing CSS and TypeScript code between multiple projects to

I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...

cssangulartypescriptshare

For a while now, I've been attempting to transform my paragraph into a block within a section that showcases elements in an inline-flex layout

I have been attempting to adjust the paragraph with the errorDate class so that it displays as a block element directly beneath the input element similar to the image provided here. The section is currently set to appear as an inline-flex. Below is the CS ...

htmlcss

center text vertically in HTML list

Here at this festival, you'll find a unique menu on the sidebar. The menu is created using an HTML list with the following structure: <ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="index.html"><i ...

htmlcsstwitter-bootstrap