Styling select drop-downs with CSS and Divs in HTML

Currently attempting to design a unique HTML select box using CSS and various divs and spans. Despite no apparent errors in the code, it seems like the functionality is not working.

To view the code, check out this link

<div class="ik_select episodes_list_selectbox ik_select_autowidth" style="position: relative; width: 258px;">
<div class="ik_select_link episodes_list_selectbox-link">
<div class="ik_select_link_text">active opt 4</div></div>
<div class="ik_select_dropdown episodes_list_selectbox-dd" style="position: absolute; z-index: 9998; width: 100%; display: none;">
<div class="ik_select_list" style="position: relative;">
<div class="ik_select_filter_wrap">
htmlcssselectdrop-down-menu

Answer №1

The structure of a simple select statement is as follows:

<select class="customStyle">
    <option>first_option</option>
    <option>second_option</option>
</select>

Answer №2

When it comes to selecting a part, it is recommended to use the built-in select-option pair for optimal functionality. However, if you prefer using DIVs for this purpose, you will need to incorporate some JavaScript to ensure it works correctly.

In my opinion, customizing the select-option would be the ideal solution. Here's an example of how you can achieve that:

.custom-select {
position: relative;
display: block;
}

/* Styling the native select */
.custom-select select {
width: 100%;
margin: 0;
outline: none;
padding: .6em .8em .5em .8em;
font-size: 16px; /* Prevent iOS zoom on focus */
}

/* Custom arrow design */
.custom-select::after {
content: " ";
position: absolute;
top: 50%;
right: 1em;
z-index: 2;
pointer-events: none;
display: none;
}
@supports ( -webkit-appearance: none ) or ( appearance: none )
or ( ( -moz-appearance: none ) and ( mask-type: alpha ) ) {

.custom-select::after {
display: block;
}

.custom-select select {
padding-right: 2em;
background: none;
border: 1px solid transparent;

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select select:focus {
border-color: #aaa;
}
}
.custom-select {
border: 3px solid #303840;
background: #56B4F9;
}

.custom-select::after {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 7px solid #303840;
margin-top: -3px;
}

.custom-select select {
font-family: 'Source Sans Pro', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
letter-spacing: 0px;
font-weight: 700;
color: #303840;
line-height: 1.5;
cursor: pointer;
}

.custom-select select:focus {
outline: none;
box-shadow: none;
border: 1px solid transparent;
}

.custom-select option {
font-weight: bold;
background: #fff;
box-shadow: none;
}
<span>Choose an effect:</span>
<div class="custom-select">
<select name="select" id="select-effect">
<option value="1" selected>Triple Swoosh</option> 
<option value="2">Simple</option>
<option value="3">Duo Move</option>
<option value="4">Content Move</option>
</select>
</div>

Answer №3

There are several reasons why using div elements to style a select in your project may not be the best idea:

  • You will miss out on native mobile browser UI support.
  • Accessibility and usability may be negatively impacted.

If you want more information, check out this informative article on the topic here.

If you still feel adamant about doing this, simply fixing the JSFiddle you provided might not be worth the effort. You'll likely need more than just basic adjustments to create a good select alternative (potentially involving significant JavaScript). I recommend exploring established solutions instead, such as:

  1. Select2:
  2. bootstrap-select:
  3. Selectize.js:
  4. And more.

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

Unexpected vertical line in MUI5 Stepper appears when invoking from a function

Greetings! I'm currently working on developing a MUI5 vertical stepper, but I've encountered an issue when rendering steps from a function. Specifically, there is an extra connector line appearing on top of the first step. If you'd like to ...

cssreactjsmaterial-uiuistepper

Differences between Bootstrap 3.3.7 and Bootstrap 4

After successfully building my application on Bootstrap 4 and incorporating Bootstrap-Table and Bootstrap-DateTime picker plugins, I ran into display issues when trying out Bootstrap-Select. It was then that things went haywire. Upon closer investigation, ...

cssbootstrap-4bootstrap-selectpicker

Installing Fontawesome 4.3

I recently downloaded the Fontawesome pack, which includes css, Less, and other supporting files. I have successfully copied these files to my website. My website is running on the Gantry framework, which requires me to edit the Head Section in order to a ...

cssfont-awesome

How can you utilize a WebElement to choose from a drop-down menu in Selenium?

Typically, I utilize the following code to select an option from a dropdown using Selenium WebDriver: new Select(driver.findElement(By.id("title"))).selectByVisibleText("Mr"); It works flawlessly for me each time. Now, I want to adopt a more PageFactory ...

seleniumdrop-down-menu

Exploring the best practices for utilizing the error prop and CSS with the Input API in Material UI while utilizing context

When working with the MUI Input API props and CSS, I encountered an issue related to the {error} and its use. This is how my code looks: const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState< ...

htmlreactjstypescriptmaterial-ui

Ensure that the link's color remains constant and remove any styling of text-decoration

Attempting to create a customized header. My goal is to change the color and remove text decoration in the navbar. Below is my code snippet: ReactJS: import React from 'react'; import './Header.css'; function Header() { return ( ...

javascriptcssreactjs

Customizing label text based on radio button selection - A step-by-step guide

JavaScript Code <script> handleClick = function(val) { document.getElementById('selectnumber').innerHTML = val; }; </script> HTML Code <ul><li><fieldset class="rating"> <legen ...

javascripthtmlasp.netinput

Arranging HTML elements with jQuery - the existing script flips back and forth

I have created a code snippet on CodePen that showcases a feature of the website I am currently developing: http://codepen.io/barrychapman/pen/BzJGbg?editors=1010 Upon loading the page, you will notice 6 boxes. The first box is active, while the remaining ...

javascriptjqueryhtmlcssdom

What is the best way to eliminate the curved border and inset box shadow from the Material UI TextField component in React?

Check out this input field: https://i.sstatic.net/Z6URV.png Notice the inner shadow and curved borders. Take a look at the given code snippet: import React, {Component} from 'react'; import TextField from 'material-ui/TextField'; im ...

cssreactjsinputtextfieldbox-shadow

Focusing solely on the presence of lowercase characters within the text field

Is it possible to apply a different color to lowercase letters in a text area? I am looking to highlight all lowercase letters in red while keeping the uppercase letters black. ...

csscss-selectors

Resolving conflicts between Bootstrap and custom CSS transitions: A guide to identifying and fixing conflicting styles

I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidde ...

javascripthtmljquerycsstwitter-bootstrap

What is the best way to add flair to the HTML <title> tag?

Just a quick question - I'm wondering if there is a method to apply CSS styles to an HTML element. Here's an example declaration: title { color: red; font-family: 'Roboto', sans-serif; } ...

htmlcsstitle

A guide on styling JSON key values within HTML

I need help organizing my JSON Document on an HTML page. Here is the JavaScript code I am using: xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // Optionally, here you can update ...

javascripthtmljson

Employing the html.validationmessagefor to display a client-side error notification

My text fields have server-side validation messages. The field 'title' is a required field on the server side with a '[Required]' data attribute in the class, but it only seems to be checked on a postback or form submit. I am saving the ...

javascriptjqueryhtmlasp.net-mvcclient-side-validation

Why is my jQuery animation running so sluggishly everywhere? Is there a way to improve its performance and make

I attempted to replicate the slider effect seen on this website: Below is the animation code: $('.tagLink').click(function () { $('html').css('overflow', 'hidden'); $('#tagBoxOverlay&ap ...

javascriptjqueryanimationcss

In JavaScript, what is the best way to target the initial option element in HTML?

As a newcomer to javascript, I'm wondering how to target the first option in the HTML <option value="">Choose an image...</option> without altering the HTML itself? My thought is: memeForm.getElementById('meme-image').getElement ...

javascripthtml

_problem with text formatting in bootstrap 4 template

I am having trouble formatting a 2-line text Right now, it appears like this https://i.sstatic.net/nJdOB.png I would like it to display like this https://i.sstatic.net/DflAK.png This is the HTML code I'm using with bootstrap <label for="check ...

htmlcssbootstrap-4

When updating the HTML content, JavaScript is outputting the code as text instead of running it

I am encountering an issue with adding the body content of a JSON file, which contains HTML code, to my existing HTML. Instead of executing the code, it appears as text within paragraph or header elements. I have searched through various discussions but ha ...

javascripthtmlcssjson

Juggling both open and closed menus within a personalized accordion navigation

Check out this basic accordion-style menu: http://jsfiddle.net/JqJce/1/ <ul class="nav level-1"> <li><a href="#">Link</a></li> <li class="has-submenu"><a href="#">Link</a> <ul class="level-2"& ...

jqueryhtmlcss

Google Maps Marker disappeared upon relocation to the current application

After reading several articles on missing markers, I'm still facing a unique issue that doesn't seem to have a clear solution. The problem arises when attempting to render a basic map with just one marker and a fixed location. Despite Chrome dev ...

cssgoogle-mapscanvasgoogle-maps-api-3marker