Is it possible to show the Display Center within the dropdown menu?

Hello everyone, this is my first time posting on stackoverflow. I have a question about centering the select options. Could someone please take a look at the image attached and let me know if it's possible?

<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
        <option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="216"&%gt;Digital Twins</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="191">Oil ＆Gas</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="221">Power Plant</option>
    </select>

CSS:

.form-select {
    display: inline-block;
    /* display: flex; */
    flex-wrap: wrap;
    align-items: stretch;
    overflow-y: unset;
}
.form-select option {
    /* position: relative; */
    float: left;
    display: inline-flex;
    /* width: calc(100%/10); */
}

Thank you in advance for your help!

css

Answer №1

.custom-select-box {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin:0 auto;
    width:100%;
}

.custom-select-box option {
    display:flex;
    justify-content:center;
    background: white;
    border-radius: 5px;
    border: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px auto;
    text-align:center;
    width:fit-content;
    max-width:150px;
    
}

option:hover {
  background: lightblue;
}
<select multiple="multiple" name="category[]" id="edit-category" size="9" class="custom-select-box" onchange="if(this.value != 0) { this.form.submit(); }">
        <option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Category 2</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="191">Oil ＆Gas</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="221">Power Plant</option>
    </select>

Answer №2

If you want to center the options in a select element, you can treat them as text and apply CSS properties such as text-align: center and white-space: pre-line. By setting display:inline-block to the options, they should be properly centered.

.form-select {
    display: inline-block;
    width: 100%;
    text-align: center;
    white-space: pre-line;
}

option {
  background: white;
  display: inline-block;
  border-radius: 5px;
  border: solid;
  border-width: 1px;
  padding: 5px;
  margin: 5px;
}

option:hover {
  background: lightblue;
}

select {
  text-align-last: center;
  padding-right: 29px;
  direction: rtl;
}
<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
        <option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
    </select>

Answer №3

It seems like you may be unsure of the specific point or perspective you are trying to convey with this code snippet. Nevertheless, if your goal is to achieve the visual display shown in the image you provided, following these CSS styles could help guide you in the right direction.

.form-select {
   display: inline-block;
   width: 100%;
   text-align: center;
   white-space: pre-line;
 }

.form-select option {
   background: white;
   display: inline-block;
   border-radius: 5px;
   border: solid;
   border-width: 1px;
   padding: 5px;
   margin: 5px;
  }

option:hover {
  background: lightblue;
}

select {
 text-align-last: center;
 padding-right: 29px;
 direction: rtl;
}
<select multiple="multiple" name="keyword[]" id="edit-keyword" size="9" class="form-select" onchange="if(this.value != 0) { this.form.submit(); }">
        <option class="filter-item br-8 f-14-med" type="submit" value="211">AI</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="176">Carbon Capture</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="186">Clean energy</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="196">COVID-19</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="216">Digital Twins</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="201">Digitization</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="181">Energy Mix</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="26">Hydrogen</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="206">IoT</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="31" selected="selected">Keyword 2</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="226">LNG</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="191">Oil ＆Gas</option>
        <option class="filter-item br-8 f-14-med" type="submit" value="221">Power Plant</option>
    </select>

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

What is the best way to incorporate a dropdown menu into existing code without causing any disruption?

I've come across this question multiple times before, but I still haven't found a suitable answer or solution that matches my specific situation. (If you know of one, please share the link with me!) My goal is to create a basic dropdown menu wit ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to eliminate the gap between inline-block elements?

I'm trying to make two inline-block divs with width: 50% each fit on one line. <div class="inline">Left one</div> <div class="inline">Right one</div> I know a practical solution, but I also want my code to look nice. <div ...

htmlcss

Tips for swapping out a sticky element as you scroll

Context As I work on developing a blog website, I aim to integrate a sticky element that dynamically updates according to the current year and month as users scroll through the content. This would provide a visual indication of the timeline for the listed ...

javascriptcssstickyintersection-observerhtml-heading

Solution for displaying as a table cell in Internet Explorer 6 and 7: Workaround

I am currently working on creating a single-row CSS table with multiple cells, aiming to vertically center text within each cell. The desired table layout is as follows: <table width="100%" height="54" border="0" bgcolor="red"> <tr> <t ...

htmlcssvertical-alignmentcss-tables

AmCharts Axis renderer mistakenly renders an additional grid line

I have successfully created a basic XYChart using amcharts4. To get rid of the grid lines on the x-axis, I changed the stroke opacity for the x-axis grid to 0 using the following code: xAxis.renderer.grid.template.strokeOpacity = 0; Everything was workin ...

javascriptcssamchartsamcharts4

The final li element in the second unordered list is targeted by the selector ul li:last-child

Check out this JsFiddle Having trouble with the pseudo code :last-child. I want the style to apply to the li containing E, but it's affecting the last li in the .subNav. I've attempted a few solutions below, but none have worked. nav ul:first- ...

csscss-selectors

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Edit I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being a ...

javascriptcssreactjsmaterial-ui

Position the div to float on the right side and then have it drop below on smaller screens

I'm currently working on implementing a design effect similar to the one shown below: on my website (), but I'm struggling with getting the HTML and CSS just right. When I move the map to float up on the right side, it doesn't drop below th ...

htmlcss

Personalizing CSS for a large user base

My website allows users to choose themes, customize background, text, and more. I am seeking the best method to save all of these changes. Is it preferable to use a database read or a file read for this purpose? Any recommendations are greatly appreciate ...

csscustomization

Automatic padding within Bootstrap5

I'm struggling to understand why I am experiencing a consistent padding at the bottom of my container in Bootstrap5. I attempted to use align-items-center within the row to center the content, but it had no effect. <!DOCTYPE html> <html la ...

cssbootstrap-5

What is the best way to vertically align text that is positioned absolutely in the center?

I'm looking to implement a hover hide effect. Check out my inspiration on CodePen * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #123456; } #object { background-color: cornsilk; border: #333 3px solid; ...

htmlcss

Maximizing the efficiency of critical rendering path while utilizing bootstrap

Is it feasible to enhance the critical rendering path (like Google and Facebook) while utilizing Bootstrap 3? Facebook opted for inlining styles connected to the header and sidebars. Meanwhile, Google inlined all styles since they have minimal styles for ...

csstwitter-bootstrap-3

Switching back and forth between JQuery and CSS display changes

My challenge involves utilizing a JQuery file to present one question at a time in a quiz format. Upon clicking the submit button, the intention is to progress to the subsequent question. However, I have encountered an issue where the transition occurs mom ...

jqueryhtmlcss

I am having trouble compiling sass in VS Code using the sass --watch command

I've encountered an issue while trying to compile sass through the terminal. Despite having already installed node.js and successfully using Live Sass, I consistently receive the following error message: sass : The term 'sass' is not recogni ...

cssvisual-studio-codesasslive-sass-compiler

What are the recommended margins for various alphabets?

When displaying text, some alphabets take up more space than others. So how can I adjust the white space between elements '#re1' and '#re2' automatically in the scenario described below? In this code snippet, what is the best way to ad ...

javascripthtmlcss

Incorporating and designing a side button using jQuery Mobile

I'm working on adding a button to the left side of the screen that is round (but not necessarily) and partially visible, with a visually appealing design. This button will allow users to open a side menu panel. Below is the HTML code for the button: ...

javascripthtmlcssjquery-mobile

Ways to format table using flex-wrap sans the use of flexbox

My HTML and CSS structure is as follows: .item { background: white; padding: 5px; display: inline-block; text-align: center; } .item > div { background: yellow; width: 60px; height: 60px; border-radius: 50%; display: table-cell; ...

htmlcss

The scroll bar will be automatically reset once the content inside is updated by using the $selector.html() function

I am looking to create a dynamic scrollable content feature. Initially, I retrieve the data and set the content as follows: $("#sub_menu li").on("click", function () { $("#gallery").html(get_html($(this).attr("id"))); $("#gallery").cs ...

javascriptjqueryhtmlcss

I need help with customizing the progress bar in HTML and CSS

How can I create a progress bar like the one shown below: .detail-load { height: 42px; border: 1px solid #A2B2C5; padding: 1px; border-radius: 10px; } .detail-load > .detail-loading { background: #904BFF; height ...

javascripthtmlcss

Unable to achieve horizontal alignment with DIV element set as inline-block

Currently, I have five columns that are aligned using the display:inline-block. Everything seems to be working fine, but there's a peculiar issue that arises when I refresh the page multiple times. Occasionally, while the first column remains at the t ...

htmlcss