Conceal the icon for the Dropdown Menu arrow

Is there a way to hide the old arrow icon in the Select (drop down) after changing it with a new one?

HTML:

<div class="row">
    <div class="col-sm-12">
        <select name="country" class="form-control SearchBar">
        <option value="ماليزيا">ماليزيا</option>
        <option value="تركيا">تركيا</option>
        <option value="النمسا">النمسا</option>
        <option value="تايلاند">تايلاند</option>
        <option value="إندونيسيا">إندونيسيا</option>
        </select>
    </div>
</div>

CSS:

#Landing_container .SearchBar {
    height: 45px;
    font-family: 'gess_two_Light' !important;
    font-size: 19px;
    border-radius: 5px;
    display: block;
    border: 1px solid #B2B2B2;
    background-image: url(../img/main/pointer.png), url(../img/main/dropdown-arrow.png);
    background-repeat: no-repeat;
    background-position: right 10px center, left 10px center;
    padding-right: 35px;
}

.SearchBar select {
    background: transparent;
    -webkit-appearance: none;       
}

Answer №1

Choosing the correct selector is important. Instead of selecting .SearchBar select, you should use select.SearchBar
Here is the corrected code -

select.SearchBar {
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

To hide the arrow in IE browser, use this pseudo class -

select.SearchBar::-ms-expand {
    display: none;
}

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

Leverage jQuery to extract data from this JSON object

It seems like this should be a simple task! I'm currently working on submitting a form using jQuery/ajax, and the success output I receive is in the form of a JSON string as shown below: {"activities-tracker-steps":[{"dateTime":"2016-09-06","value": ...

Is it considered fashionable to utilize HTML5 data attributes in conjunction with JavaScript?

Currently, I am utilizing HTML5 data attributes to save information such as the targeted DOM element and to initialize events using jQuery's delegation method. An example of this would be: <a href="#" data-target="#target" data-action="/update"> ...

Angular JS: Text with multiple lines and various links

Looking for assistance with integrating multi-line text display in AngularJS? You want to limit the text to 225 characters, add a "view more" hyperlink, and a "less" link to hide extra text. While you've attempted it using jQuery, you're seeking ...

Apply a style to the div element that contains a TextInput component

As a beginner in the world of React and Material UI, I am currently working with Material UI version "1.0.0-beta.17", React 15.6.2, styled-components 2.0.0, and styled-components-breakpoint 1.0.1. Within a div element, I have two TextInput fields. const ...

Error message for something that is conceptualized as an unexpected mistake in a sector unrelated to J

https://i.stack.imgur.com/FBmia.png Whenever I try to run the following code snippet, I encounter an error: var request = 'randomcode'; $.post('../php/forms/postrequest.php', 'type=' + request, function (response) { var ...

CSS with three columns: the middle column has a fixed size, while the right and left columns

I am attempting to create a 3 column layout with specific requirements: The middle column is fixed at a width of 660px The left and right columns should each take up half of the remaining space, but have a minimum width of 120px The middle div need ...

What precautions should I take to safeguard my HTML/CSS/JS projects when sharing a link with my employer?

Picture this scenario: you need to share a link for your work, but you want to protect it from being easily copied or developed further by someone else. However, since it's a document, any browser can still view it. Can anyone recommend a tool that wi ...

"When using Webpack and Sass, the background image specified with background: url() is processed correctly. However, when using webpack-dev-server, the image is

Currently, I am utilizing Webpack 2 in conjunction with webpack-dev-server and Sass loader. Here is my current configuration: { test: /\.scss/, loaders: [ "style", { loader: "css", query: { modules: false, sourceMap: true } }, ...

Chrome is able to interpret Behat CSS selectors, whereas Firefox struggles with them

Recently I began working with Behat and Selenium for website test automation. One issue I've encountered is that some CSS selectors work in Chrome but not in Firefox. For instance, in my Behat code: Then I press ".topmember-resultList .resultListIte ...

There seems to be a glitch in the AJAX code

I am currently working on a project that involves displaying categories and subcategories of products on a webpage. When users click on either a category or a subcategory, AJAX is used to send the selected item to a php script which then generates HTML cod ...

I'm having trouble getting jQuery to work on a page loaded on an embedded device's browser. How can I troubleshoot this issue?

In the process of creating a web application that will only run on a specific embedded device with its own web browser. According to the documentation, this device's browser is similar to Firefox but not an exact match. The plan was to utilize the j ...

The Cordova minification tool fails to compress files within the browser platform

I recently installed the cordova-minify plugin to compress the javascript code in my Cordova app. When I tried running the command: cordova build browser An output message appears: cordova-minify STARTING - minifying your js, css, html, and images. ...

Adjust the alignment of text on both ends of the HTML5 canvas

Is there an easier way to align text on both sides of a canvas element besides using CSS? The link below might provide some insight: https://github.com/nnnick/Chart.js/issues/114#issuecomment-18564527 I'm considering incorporating the text into the d ...

Encountering a 400 Bad Request Error with Salesforce LiveAgent Rest API

I've been working on a project that involves making a REST GET request to the salesforce Live Agent API to check service availability. While I've had success with making the simple GET request from my web-based REST client (using the Chrome Plug ...

Using Jquery, insert a line break when a specific character is entered in a text area by pressing the Enter button

$('.text-description').keyup(function () { var count = $(this).val().length; if(count == 63){ //insert line break here } }); When the character count reaches 63, including spaces, I want the cursor to move to the next line (sim ...

Safari: The onbeforeunload event

Welcome! To experience the Leave | Stay confirmation box on your page, please make sure you are using Safari 10. I am currently facing an issue with getting the confirmation box to display properly across different browsers. To begin, please visit and l ...

Manually adjusting the aria-expanded attribute to "true" does not result in opening a new tab

After a certain condition is met, I want to open another tab. Below is my bootstrap navbar code along with the jQuery script. <ul class="nav navbar-default nav-justified" role="tablist" id="navbar"> <li role="presentation" class="active"><a ...

Can you please provide a method for determining which characters are adjacent to each other

I am in the process of developing a markdown editor and I require a check to identify if adjacent characters are specific characters, removing them if they match or adding them otherwise. For example, if the selected text is surrounded by two asterisks li ...

Display "Temporary Text" in an HTML drop-down list if no selection is made

Is there a way to ensure that the placeholder in an existing select element always remains visible? I noticed that when I select an option and then go back to the blank item, the placeholder disappears. How can I make sure it is always displayed when no ...

What steps can be taken to activate the remember password feature when using an AJAX login system?

I've developed a web application with a basic login box, utilizing jQuery AJAX for the login process. However, I'm facing an issue with prompting the browser to remember the password. How can I trigger the "Do you want the browser to remember th ...