Tips on incorporating a floating label for the <select> element without relying on the required attribute

I've gone through all the related questions, but unfortunately, I couldn't find a solution. I have shared the code I have so far. My goal is to eliminate the required attribute from the <select> element and keep it functioning correctly. If I simply remove it now, the functionality will break.

I am aware that this can be achieved using JavaScript/jQuery, but my preference is to accomplish this with CSS.

label.input {
    position: relative;
    overflow: hidden;
}

span.input__label {
    position: absolute;
    left: 0;
    padding: 7px 12px;
    width: 240px;
    font-size: 14px;
    color: #828282;
    pointer-events: none;
    height: 35px;
}

.input:active::after {
  transform: rotate(-180deg);
}

.input__field:invalid {
  color: transparent;
  transition: 200ms color linear 100ms;
}

.input__field:valid + .input__label, .input__field:focus:valid + .input__label {
    transform: translate(0.5em, -10%);
    transition: 200ms transform ease-out;
    color: #000;
    top: 5px;
    left: 2px;
    padding: 0 7px;
    font-size: 10px;
}
.input__label {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 1.5rem 1.5rem 0;
  pointer-events: none;
  transform-origin: 0 0;
  transition: 200ms transform ease-out 200ms;
  will-change: transform;
}

select.form-select {
    width: 240px;
    font-size: 14px;
    color: #828282;
    display: inline-block;
}

select.form-select option {
    color: #828282;
}

.form-select:focus {
    border-color: #dcd9d6;
    outline: 0;
    box-shadow: none;
}

form select {
    width: 240px;
    height: 52px;
    padding: 16px 11px;
    font-weight: normal;
    font-size: 14px;
    color: #828282;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #dcd9d6;
    margin-right: 7px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="64060b0b10171016051424514a544a56">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<label class="input">
    <select name="max-price" class="input__field form-select" id="maxPrice" required>
        <option value="" selected disabled hidden></option>
        <option value="100,000">100,000</option>
        <option value="200,000">200,000</option>
        <option value="300,000">300,000</option>
    </select>
    <span class="input__label">Max Price</span>
</label>

htmlcssvalidationhtml-select

Answer №1

Hope this solution works for you!

To make it function properly, remember to include the onchange event in your select element.

onchange=" this.dataset.select = this.value;


       label.input {
    position: relative;
    overflow: hidden;
}

span.input__label {
    position: absolute;
    left: 0;
    padding: 7px 12px;
    width: 240px;
    font-size: 14px;
    color: #828282;
    pointer-events: none;
    height: 35px;
}

.input:active::after {
  transform: rotate(-180deg);
}

.input__field:invalid {
  color: transparent;
  transition: 200ms color linear 100ms;
}


... (CSS code continues) ...

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269776975">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<label class="input">
        <select onchange=" this.dataset.select = this.value; " name="max-price" class="input__field form-select" id="maxPrice">
            <option value="" selected disabled hidden>Max Price</option>
            <option value="100,000">100,000</option>
            <option value="200,000">200,000</option>
            <option value="300,000">300,000</option>
        </select>
        <span class="input__label">Max Price</span>
</label>

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

Adding multiple checkboxes to a single database field

Looking for a way to insert multiple checkbox values into one database field in a comma delimited format. For example, if the user selects checkbox one and checkbox two, I want the database input to be "tickOne, tickTwo, etc." Does anyone have suggestions ...

javascriptjqueryhtml

Tips for dynamically incorporating input forms within AngularJS

I am trying to dynamically change the form inputs using ng-bind-html. However, I am only able to display the label and not the text box on the DOM. The content inside ctrl.content will depend on the values received from the server. Important Note: The ...

javascripthtmlangularjshtml-sanitizing

Switch up the color and eliminate the gradient on the remove button for the Qualtrics 2014 3D theme

Hello everyone, I have successfully updated the styling of the next/previous buttons in most survey themes using CSS code snippets found here. However, I am facing an issue with the newest themes ("Qualtrics 3D - Gold" & "Qualtrics 3D - 2014") as I cannot ...

cssqualtrics

Display the button immediately following the text within the cell without extending beyond its boundaries

Check out the code snippet below: <td> <div> <span class ="name">Can be long, can be short</span> <button>Test</button> </div> </td> td{ white-space: no-wrap; width:175px; position: relati ...

htmlcss

Mismatched photo caption positioning beneath image (html, CSS)

Question from a beginner: I'm attempting to position a photo on the right side of a webpage, with text wrapping around it on the left, and the photographer credit directly under the photo. The issue is that the credit is appearing on the left side ab ...

htmlcssfigcaption

Using AngularJS to handle error validation for dropdowns and select elements that will redirect using the ng

Currently, I am utilizing angularjs's ng-href along with a select HTML element containing ng-model. The ng-href is being used to link to the "selectedItem" from ng-model. However, I have encountered difficulty in validating or displaying an error mess ...

javascripthtmlangularjsvalidationangularjs-ng-href

Getting the value of a checkbox from a MySQL database

Is there a way to print the entire contents of a textarea without any scroll bars, so that all text entered is visible? Currently, only the last few lines are showing when printed. I need the textarea to automatically resize for printing. <textarea cla ...

javascripthtmlcss

Strange Behavior of Jquery UI Tabs

Encountering a peculiar issue with jQuery UI tabs. Below is the code snippet: <div class="ym-gbox"> <script> $(function() { $( "#tabs" ).tabs(); }); </script> <h1>Versions Overview</h1> ...

jqueryhtmljquery-uijquery-ui-tabs

Unable to retrieve file path from image selection in JavaScript by clicking on a button

I am trying to create a simple browsing feature that only accepts images. However, after clicking the button, I am unable to retrieve the full path in JavaScript. All I can get is the filename. JavaScript <script type="text/javascript"> functio ...

javascriptjqueryhtmlimage-uploading

Is the page reloading automatically after updating the innerHTML content?

Trying my hand at creating a JavaScript/HTML page that automatically generates an audio player when provided with a URL. However, every time I click the generated button, the audio player is inserted but then disappears as if the page is refreshing. Here ...

javascripthtml

What is the best way to reposition my boxes to sit below the diamond DIV instead of behind it?

I've been learning HTML5 and CSS, but I'm encountering an issue where the divs are appearing behind other divs. My goal is to have diamonds separated by boxes, with the boxes displayed below the diamonds. Clicking on a diamond should jump to the ...

htmlcss

Using Paypal API in PHP to create a payment form

<?php $action=$_REQUEST['action']; if ($action=="") { ?> <center> <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_xclick"> <input type=" ...

phphtmlformspaypal

Matching HTML tags with Regex while excluding specific ones is possible using a carefully

My goal is to strip out all HTML opening/closing tags (along with attributes) that are not on my approved list. const allowedTags = ['a', 'b', 'i', 's', 'u', 'sup', 'sub', 'strong&a ...

javascripthtmlregex

I have a question for you: How can I customize the font size in Material-UI TextField for different screen sizes?

I'm facing a challenge in Material-UI where I need to set different font sizes for TextField. While it may be simple in HTML/CSS, it's proving to be tricky in Material-UI. Can anyone help me figure out how to achieve this? The code snippet below ...

javascriptcssreactjsmaterial-ui

Issue with accessing hamburger menu on Bootstrap site

I recently added a navigation bar to my website using the BootStrap documentation. However, when I switch to the mobile version and click on the hamburger menu, nothing happens. Below is the code snippet for reference: <nav class="navbar navbar-expand- ...

htmlcsstwitter-bootstrapbootstrap-4

The anchor on a one-page website functions correctly solely in Chrome

After creating my online portfolio, I noticed that the anchor tags on the top menu work perfectly in Chrome, but in Explorer and Firefox, when you click the Skills tab it lands somewhere in the middle of my work. Any ideas why a simple tag might not load c ...

htmlgoogle-chromeanchormozilla

Creating an HTML tag from Angular using TypeScript

Looking at the Angular TypeScript code below, I am trying to reference the divisions mentioned in the HTML code posted below using document.getElementById. However, the log statement results in null. Could you please advise on the correct way to reference ...

htmlangulartypescript

Looking for assistance with deleting a child element in an XML file using PHP

I need help figuring out how to delete a child from my jobs.xml file with a PHP script. My jobs.xml file looks like this: <jobs> <event jobid="1"> <title>jobtitle</title> <desc>description</desc> &l ...

javascriptphphtmlxmlsimplexml

Selecting radio buttons across multiple div classes

I've been struggling to programmatically select specific radio buttons on a webpage. My goal is to automatically choose the second option in each group of radio buttons, but I'm getting lost in the syntax. Unlike most examples I've found on ...

javascriptjqueryhtmlcss

I am trying to replace the buttons with a dropdown menu for changing graphs, but unfortunately my function does not seem to work with the <select> element. It works perfectly fine with buttons though

I am currently working on my html and ts code, aiming to implement a dropdown feature for switching between different graphs via the chartType function. The issue I am facing is that an error keeps popping up stating that chartType is not recognized as a ...

htmlangulartypescriptchart.js