Is it possible to rotate the caret in the dropdown 180 degrees using only CSS?

Is there a way to achieve a 180° rotation of the caret in a dropdown menu upon clicking it, creating the illusion of an animation?

I would prefer to accomplish this using CSS only, without the need for JavaScript, but I am open to any suggestions.

.select {
  font-family: 'Roboto';
  font-size: 16px;
  font-weight: bold;
  color: red;
  background-color: white;
  border: thin solid red;
  border-radius: 8px;
  height: 45px;
  text-align: center;
  margin-right: 10px;
  resize: none;
  outline: none;
  cursor: pointer;
}
<div class="city_select_dropdown_container">
  <div>
    <span style="color:white;font-size:12px">City</span>
    <form>
      <select class="select">
        <option>Option 1 </option>
        <option>Option 2 </option>
      </select>
    </form>
  </div>
</div>

I am attempting to make changes to the CSS within this div/form, but I am running into some obstacles.

javascripthtmljquerycss

Answer №1

or with a smaller font size

$(document).on('click','.select',function(){
  $(this).parent().toggleClass('focused');
})
.select {
  font-family: 'Roboto';
  font-size: 16px;
  width:100%;
  font-weight: bold;
  color: red;
  background-color: white;
  border: thin solid red;
  border-radius: 8px;
  line-height:45px;
  padding: 0 3em 0 1em;
  text-align: center;
  margin-right: 10px;
  resize: none;
  outline: none;
  cursor: pointer;
   -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
}
.selector {
  position:relative;
  display:inline-block;
  }
.selector::before {
  content:"";
  display:block;
  width:5px;
  height:5px;
  top:50%;
  border-right:2px solid black;
  border-bottom:2px solid black;
  transform:rotate(45deg);
  margin-top:-2.5px;
  position:absolute;
  right:1em;
  color:#000;
  z-index:2;
}

.selector.focused::before{
  transform:rotate(0);
  
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="city_select_dropdown_container">
  <div>
    <span style="color:black;font-size:12px">City</span>
    <form>
    <div class="selector">
      <select class="select">
        <option>Option 1 </option>
        <option>Option 2 </option>
      </select>
      </div>
    </form>
  </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

Unforeseen issues arise when working with CSS selectors

Exploring CSS with a series of buttons and encountering some unusual behavior. Here's the code: https://codepen.io/buoyantair/pen/JNgqXG?editors=1100 Let me share the snippets for Pug Script and Sass file: Pug Script header.row .col ...

htmlcsssasscss-selectorspug

Tips for retrieving a value with jquery

I am looking to display the name along with the address for each entry. var data = ['{first: era, gold, jack}', '{two: london, USA, India}']; $.each(data, function(index, item) { alert(item); //result era london, gold USA, jack ...

jquery

Submitting a form with AJAX using JQuery in ASP.Net is made even easier when utilizing Master Pages for

After developing a search program with lucene.net, I encountered an issue where reloading the entire page was necessary to submit a new query. To resolve this, I explored implementing AJAX for seamless search submission, but have been facing difficulties i ...

jqueryasp.netajaxforms

Exploring Selenium WebDriver: Manipulating Table Elements and Iterating Through Rows

Is there a more efficient way to iterate through tables row by row without using Absolute Xpath? In my test case, I need to search for specific data in each row. This was the previous logic of my code: private static int iRow; WebElement sWorkUnitRows = ...

javahtmlselenium-webdriver

Repeating declarations in AngularJs controllers when injecting services

Currently, my controllers are set up using array injection. However, as I pass more services to the controller, I end up repeating each one twice - in the array and as a parameter. I came across a helpful discussion on Injecting a service into another ser ...

javascriptangularjs

"Retrieve data from an Excel file and either present it in a textarea or store it as an array

Is it possible to use JavaScript to read an Excel file and convert a single column (identified by name or index) into an array in JavaScript? ...

jqueryhtmlcakephpjqgrid

Automatically install the development version of NW.js when running 'npm i'

Is it possible to automate the installation of the developer version of NWJS from package.json, similar to when I run npm install? For example, if I type npm i nw --nwjs_build_type=sdk I attempted to set an environment variable in my package.json like th ...

javascriptnpmpackage.jsonnwjs

Looking for assistance in identifying errors within jQuery or php code on a Wordpress site

I'm struggling to identify the error in my code, especially since it involves multiple languages. Initially, I enqueue the script that needs to be executed and then I utilize wp_localize_script in the main function file of the plugin like this: // A ...

phpjqueryajaxwordpress

Creating a hover effect in CSS that applies to neighboring elements with similar attributes

My table is created using a struts2 iterator and has variable length and content. It looks something like this: <table> <tr class="odd" machineId="1" parameterId="1"><td></td></tr> <tr class="even" machineId="1" pa ...

cssjsphtml-tablehover

Using jQuery to sort through a list

I am currently working on a JavaScript code that filters a list using an input field. The issue I am facing is that the filter is case sensitive. This means that if I have an item named "item1," I have to type the exact word to filter it out. $(function() ...

javascriptjquerysearchfilter

I am interested in monitoring for any alterations to the @input Object

I've been attempting to detect any changes on the 'draft' Object within the parent component, however ngOnChange() does not seem to be triggering. I have included my code below, but it doesn't even reach the debugger: @Input() draft: ...

javascriptangulartypescriptecmascript-6

Begin the process of setting up PDF.js on the website

I've been attempting to incorporate PDF.js into my website, but I'm struggling to do it correctly. When I try to display the PDF file on the screen, I encounter this issue: https://i.sstatic.net/aixrP.png Although I can't see the PDF file ...

javascripthtmlpdfcakephp-2.5pdf.js

Having trouble parsing an array from req.body using Node.js Express

I am currently facing an issue while trying to retrieve an array from a JSON request using Postman. In my Node.js application, I am able to read all values from req.body except for the array. When attempting to access the array, I only receive the first va ...

javascriptnode.jsexpress

Unable to retrieve the correct `this` value within an axios callback

Feeling a bit fuzzy-brained at the moment. I've put together this code that downloads a JSON from a URL and displays it on the screen: export default class App extends React.Component { constructor(props) { super(props); this.state = { data: [], } } ...

javascriptjsonreactjsaxios

Incorporating a recurring image beneath a navigation menu

I'm attempting to recreate a header that has a similar appearance to the following: https://i.stack.imgur.com/uVXs3.png However, I am facing challenges in generating the repeating diamond design beneath the black bar. The diamond pattern resembles t ...

htmlcss

Encountering issues with Nodemailer when attempting to send emails to incorrect recipient addresses

When using Nodemailer SMTP to send an email, it works fine with valid/existing email accounts. However, I encounter a 500 error when entering an email address that does not exist. Although I understand that the email is not sent because it does not exist, ...

javascriptnode.jssails.jsnodesnodemailer

Sending two values from an HTML form using Ajax

Looking to transfer two values from my HTML code to the PHP code: one for 'up' or 'down', and the other for the post ID. I have a system where users can vote on posts by clicking either 'up' or 'down' arrows next to ...

javascriptajax

The value of a Highcharts series does not match that of a Data Source

Encountering an issue with Highcharts where the value of this.y does not reflect the data source. The discrepancy is apparent in the image below. Uncertain if this is a bug or user error. Screenshot illustrating the problem You can view my Demo here: htt ...

javascriptarraysjsonhighcharts

Is it possible to include additional transformations to a div element?

Is it possible to add additional rotation to a div that already has a transform applied? For example, can I do the following: <div style="width: 200px; height: 200px; background-color: red; transform: rotateX(90deg) rotateY(10deg)" id="myDiv">< ...

javascriptjqueryhtmlcsstransform

Using forEach in React to simultaneously set multiple properties and return destructured output within the setState function

The following is the initial code snippet: setRows((rows) => rows.map((row) => selected && row.node === selected.id ? { ...row, row.a: "", row.b: "", row.c: "" } ...

javascriptreactjstypescriptreact-typescript