Customizing the Dropdown Arrow Icon to a Desired Icon of Choice

I'm looking to customize the dropdown select on my website by changing the arrow icon to a plus icon, which will then turn into a minus icon when clicked and the choices are displayed. I'm new to jquery and eager to learn more about this language. Can anyone assist me with coding this? Below is a snippet of the code I have been working on.


        <form action="/action_page.php" class = "footer-dropdown">
            <fieldset>
              <select class = "select-div" name="template">
                <option active value="item1">Related Sites</option>
                <option value="item2">Sungshin Women's University</option>
                <option value="item3">Sungshin Women's University Lifelong Education Center</option>
              </select>
            </fieldset>
        </form>

                    <!-- Here is my dropdown menu code snippet -->
jqueryhtmlcss

Answer №1

Using toggle class jQuery makes it easy to achieve this.

$('.sel_par').click(function(){
  $(this).toggleClass('open');
});
.sel_par {
  position:relative;
  width: max-content;
}
.sel_par:after {
  content: '+';
  display:block;
  position:absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: max-content;
}
.sel_par.open:after {
  content: '-';
  display:block;
  position:absolute;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  height: max-content;
}
.select-div {
  -webkit-appearance: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/action_page.php" class = "footer-dropdown">
    <fieldset>
      <div class="sel_par">
        <select class = "select-div" name="template">
          <option active value="item1">Related Sites</option>
          <option value="item2">Sungshin Women's University</option>
          <option value="item3">Sungshin Women's University Lifelong Education Center</option>
        </select>
      </div>
    </fieldset>
</form>

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

bespoke HTML elements and properties

I'm currently facing some difficulties and I am unsure of how challenging it can be. I have tried following various tutorials, including those on SO and YouTube, but they all provide different approaches leaving me stuck. My goal is to create a custo ...

javascripthtml

Exploring the process of iterating through Django form errors post-receiving them in JSON format via AJAX

Everything seems to be working fine with my signup form, as it saves users correctly without any errors. However, I am facing an issue when trying to display errors related to form field validation. Despite retrieving the errors using form.errors.as_json, ...

jqueryjsondjangoajaxdjango-views

Extracting data from JSON response

The JSON output is as follows: [{"Post":{"name":"Name1","text":"Text1"}}, {"Post":{"name":"Name2","text":"Text2"}}] In attempting to retrieve the values, I used the following code: var data = $.parseJSON(result) // converting JSON to object I tried acc ...

jqueryjson

Guide on creating a CSS shadow for the top and bottom sections of a div

I'm looking to enhance a DIV element by applying a shadow effect using CSS3. To achieve a shadow on the bottom of the DIV, I have utilized the following code: -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.75); box-shadow: 0 1px 10px rgba(0, ...

htmlcssshadow

Position the link to the right of the menu using CSS styling

I'm attempting to position a link next to my menu using CSS, but due to my limited experience with CSS I'm struggling to achieve the desired result. Currently, the link appears at the bottom left of the menu section. The code for the menu and lin ...

csshyperlink

Table causes jQuery form to malfunction

I've encountered an issue with a form I created that calculates price based on selected criteria. When the code is placed into separate cells of a table, it no longer functions properly unless the browser is refreshed. Any suggestions for fixing this? ...

jqueryhtml-table

Make the background extend all the way down to the bottom of the page, whether it scrolls or

I am seeking a solution to have the background extend to the bottom of the page, while accommodating both short and long pages. <html> <body> <div id="container">Container of variable height</div> </body> </htm ...

htmlcss

Performing a AJAX POST call to the latest Google Analytics V4 API

Recently, the Google Analytics v4 API was updated and now requires POST requests instead of GET requests. Unfortunately, there are not many examples available yet... I managed to obtain the accessToken, but when I attempt the following POST request, I alw ...

javascriptjqueryajaxpostgoogle-analytics-api

Enter the [color] HTML5 code and check for compatibility with all the latest web browsers

I am interested in implementing a color picker functionality using the input[color] element in HTML5. I would like to confirm if this method is compatible with all modern browsers. Additionally, I am curious if there are alternative ways to achieve this, ...

htmlbrowser

JavaScript doesn't automatically redirect after receiving a response

Hey there, I'm attempting to implement a redirect upon receiving a response from an ajax request. However, it seems that the windows.href.location doesn't execute the redirect until the PHP background process finishes processing. Check out my cod ...

javascriptphpjqueryajax

If the HTML attribute "dir" is set to "rtl", then add a class to the body

I have a website that supports both English and Arabic languages. When the language is changed to Arabic, the "dir" attribute with a value of "rtl" is added to the HTML <html dir="rtl">. I want to add a class to the body element when the language i ...

phpjqueryhtmlcssjquery-ui

Iterate through a directory on the local machine and generate elements dynamically

I am looking to create a jQuery-UI tabs menu that includes 54 images on each tab. I have a total of 880 images stored in a folder, and it would be very time-consuming to manually insert an <img> tag for each one. Is there a way to dynamically cycle t ...

javascriptjqueryhtmlcssdirectory

What are the best methods for encoding and decoding query parameters?

Here is the current implementation of my Express.js function "Restore objects pickled into JSON strings": router.post('/restore', json_parser, function(request, response, next) { console.log('router.post /load'); console.log(&apo ...

jqueryajaxjsonnode.jsexpress

Error message: A boolean type cannot be used as a function in the fullcalendar ajax call

I have successfully implemented a fullcalendar into my app and have added a method to filter results by user: function filterEventsByProvider(selected_provider) { $('#calendar').fullCalendar('removeEvents'); $('#calendar&a ...

javascriptjqueryruby-on-railsfullcalendar

PHP's Encoding Woes Are Back in Action

I'm encountering encoding challenges on my website, and it's becoming quite frustrating. Allow me to elaborate My meta tag specifies utf8 as the charset. The scripts I'm using also have utf8 defined (<script type="text/javascript src=". ...

phphtmlajaxpostgresqlutf-8

jQuery includes inArray as the final element in an array or object

There's a strange issue I've noticed where, in some cases, when jQuery is imported, it appends the inArray function as the last element of a defined object or array. This can cause problems with for ... in loops since it counts this unexpected fu ...

javascriptjquery

Issue with Bootstrap 4 pagination click handler triggering only once

Incorporating ASPNET MVC and Bootstrap 4, I have carried out tests on both Chrome and Firefox browsers. Instead of utilizing a submit button, I am attempting to manually submit an ajax request. Whenever a new pagination link is clicked, a javascript functi ...

jqueryasp.net-mvcbootstrap-4

Combining multiple HTML elements onto a single page with just one function

I am trying to dynamically import specific HTML content into a new page, rather than the entire page itself. The issue I am encountering is that I have to create a document load function for each individual item I want to import. Is there a more efficient ...

javascriptjquery

Is it possible to switch the placement of my sidebar and content?

For some reason unbeknownst to me, I have created two distinct CSS classes called content and sidebar1. My original intention was to position the sidebar on the right side of the page. However, no matter what adjustments I make, the sidebar stubbornly rema ...

htmlcssweb

Navigate back to the previous page following the completion of an AJAX data submission

When using ajax to send data from page A to the server, the spring controller returns welcome page B. This process works correctly on Firefox and Internet Explorer, but on Chrome, there is an issue where after successfully sending the data via ajax, the de ...

javascriptjqueryajaxspring