Is there a way to merge attribute selectors for elements that satisfy one condition or the other?

Is there a way to combine selectors effectively?

<input type=number>
<input type=date>

I was able to successfully hide the arrows in a number field with the following code:

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

However, I am now trying to add the date field to the same styling but struggling to combine them. I have attempted various combinations without success. It seems like it should be simple, but my attempts haven't worked.

input[type=number][type=date]::-webkit-inner-spin-button,
input[type=number][type=date]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

I understand that there are alternative methods such as using IDs, but since I am learning CSS, I would like to figure out how to merge [type=date] and [type=number] into a single line of code. Does anyone have any suggestions?

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
<input type=number>
<input type=date>
htmlcsscss-selectors

Answer №1

Your solution attempt will only target inputs with both type=number and type=date, which is not effective.
You should use either type=number OR type=date, and unfortunately, the following code snippet is the only way to achieve that.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button, 
input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

It's important to note that -webkit-inner-spin-button is a webkit-specific pseudo-element, so it may not work in other browsers. Also, the -moz-appearance line is unnecessary!

Answer №2

One way to style elements using CSS is demonstrated here:

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
<input type=number>
<input type=date>

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

I am looking to switch the content between two divs. Specifically, I want to take the content from div 1 and move it to div 2, while moving the

I am facing a challenge involving three divs. One of them is the main div, while the other two are positioned below it and contain different content. I am trying to find a way to swap the content between div one and div two in such a way that the original ...

jqueryhtmlcss

Retain the user's input in the text box even after the form has been submitted

Currently, I am tackling the challenge of creating a register form with an error handler to manage any mistakes made by users during registration. Once the form is submitted, potential errors are displayed to the user. To enhance user experience, I am ex ...

javascripthtmlforms

Demonstrate a array of values at varying angles within a circle using the functionalities of HTML5 canvas

Looking to utilize HTML5 Canvas and Javascript for a project where I need to showcase various values (depicted by dots possibly) at different angles within a circle. For example, data could include: val 34% @ 0°, val 54% @ 12°, val 23% @ 70°, a ...

javascripthtmlmathcanvasdegrees

Illuminate a corresponding regular expression within a text input

I currently have a functional code for testing regex, which highlights matching patterns. However, my challenge lies in highlighting the result within the same input as the test string. Below you will see the HTML and JavaScript snippets along with two ima ...

javascripthtmlangularjsregex

What are the advantages of using clearfix for clearing floats in CSS?

Recently, I encountered an issue with using clearfix to clear the floating effect in CSS. Someone mentioned that it may not be the best technique and suggested using alternative methods. Is this information accurate? If so, what are some other options tha ...

csslayoutcss-floatclearfix

Outline of a Bootstrap row

I am trying to create a row layout where the background extends beyond the designated row area. The desired design is shown in the image, with an additional white space before the actual text of the row. However, when I attempt to start a new row and set ...

csstwitter-bootstrapbootstrap-4

Looking to add some movement to your website? Learn how to make an image track your mouse pointer in a specific section of your webpage

I'm just starting out with web design and javascript, so please be patient. My goal is to have an image follow the mouse pointer only when it's within a specific section of my website. I've managed to make the image track the mouse cursor ...

javascriptjqueryhtmlimagemouseevent

Issue with Expo Google Places Autocomplete: ListView not clickable

I am currently encountering an issue with the GooglePlacesAutocomplete feature. When I input the address query, such as "São C," the 'listView' returns options like "São Caetano, São Paulo ...", however, when I attempt to select an option from ...

cssreact-nativeexpogoogle-places-autocomplete

Having trouble getting Sass extending to work in a basic scenario?

Here we have a simple example of Sass code, an Angular 2 component that accesses the Sass code, and the rendered HTML. However, there seems to be an issue with the blueBig span element in the last part. As someone new to Sass, I am not sure why this basic ...

cssangularsass

Invalid file name detected during the download process

Below is the Javascript code I currently use to download a pdf: var link = document.createElement('a'); link.innerHTML = 'Download PDF file'; link.download = "Report.pdf"; link.href = 'data:application/octet-stream;base64 ...

javascripthtmltypescriptpdfarraybuffer

Guide to linking two input fields using a single datepicker

To achieve the goal of filling two input fields simultaneously, take a look at the following code snippet: <mat-form-field> <input matInput [matDatepicker]="startDate" formControlName="SaleDate" /> ...

htmlangulardatepicker

Menu rollout problem when clicking or hovering

I'm facing challenges in making my menu content appear when a user clicks or hovers over the hamburger menu. My app is built using Angular, and I've written some inline JavaScript and CSS to achieve this, but the results are not as expected. Here ...

javascripthtmlcssangularjs

Send in 3 sets of HTML forms along with a single JavaScript button to save all data in a single row within

I'm facing an issue with submitting multiple forms on a page without submit buttons. I have a script that submits all three forms at the same time, but it's creating separate rows in the database instead of one combined row. Any suggestions on ho ...

htmlforms

Problems with the main title formatting in the header

I am currently working on a new website and have encountered an issue with the header design. The Mainline "PersIntra" is overlapping the "log out button" box, which I would like to be positioned beside it instead. Despite my efforts with CSS and nesting ...

htmlcsslayout

Anchor point located within a scrollable div with a fixed position

A unique challenge has presented itself with a div called #results that appears when words are entered into a text box, triggering relevant results. This particular div is fixed and scrollable, with pagination located at the bottom of the scroll. The iss ...

javascriptjqueryhtmlcssajax

Position the Close Button within the CSS Cookie Consent Popup in perfect alignment

Having trouble aligning the close X button in my cookie consent popup to the center? I added a margin-top to adjust it, but I'm looking for a better solution. <div class="alert cookiealert" > By using our website you agree to our C ...

htmlcsscookiesbootstrap-4cookieconsent

Searching for specific values within data attributes using jQuery wildcards

I am currently utilizing the data_attribute on this page and have the following elements with data attributes. No. 1.<div class="row hidden" data-party-registration-source-type-id="1"> 2.<div class="row hidden" data-party-registration-source- ...

javascriptjqueryhtml

What is the process for implementing a banner across the entire website?

I understand that this question resembles one found at this link, but I did not find a clear solution there. Currently, I am utilizing <?php include "banner.html"; ?>. However, in order for this method to work, I must change the extension of ALL page ...

phphtml

Enclose several lines of text within a border in the midst of other content

I'm looking to add a stylish border around multiple lines of text in a paragraph without having the border appear on each line individually. While I could enclose all the text in a div, it would separate the content from the rest of the paragraph. W ...

javascripthtmlcsscoding-style

Vue.js: click event does not trigger transform animation

I am facing a challenge with rotating an arrow icon within a dropdown menu. Despite my efforts, the rotation does not synchronize with the appearance of the dropdown menu. Here is the Vue component code snippet: <nav> <section class= ...

javascriptcssanimationvue.jsrotation