Is it possible to incorporate a label within a dropdown menu (<select>)?

How can I add a label inside a select box using Bootstrap? Here is an example:

Before selecting an option

After selecting an option, the label should appear in a small size like this:

After selecting an option

:

<div class="form-group">
    <label for="sector">Sector</label>
    <div class="label form-label-group">
        <select class="form-control" id="sector">
            <option>Civilian</option>
            <option>Officer</option>
            <option>Retirement</option>
        </select>
    </div>
</div>

Answer №1

Take a look at the interactive demo below:

$('#sector option[value=temp]').hide();
$('#sector').change(function() {
  $('#sector option[value=temp]').show();
 $("#sector option[value=temp]").css("font-size", "small");
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div class="form-group">
  <label for="sector">Sector</label>
  <div class="label form-label-group">
    <select class="form-control" id="sector">
      <option disabled value="temp">Sector</option>
      <option value="Civilian">Civilian</option>
      <option value="Officer">Officer</option>
      <option value="Retirement">Retirement</option>
    </select>
  </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

Emphasize the current page's menu item for the user viewing it

I'm looking for a way to visually emphasize the current menu item so that users can easily identify the page they are currently on. This could be achieved through bolding or underlining, whichever works best. I'm hoping to accomplish this using o ...

Display user's name in navigation bar using asp.net mvc

When working on an ASP.NET MVC project, I wanted to include a short message for the user, such as 'Hello, username!' In the navigation bar, specifically when the user is signed in, I encountered some display issues with the standard bootstrap la ...

Deciding Between Two Columns or One Column for Your JQuery Accordion

I am currently working on customizing an Accordion that is too large in height for my liking. My goal is to convert the single column layout into a two-column display, side by side. Having multiple items in one column results in excessive height, hence t ...

Concealing subcategories within a responsive menu using jQuery

My website's responsive menu changes based on screen resolution, but I encountered an issue. On mobile viewports, the sub items in the menu are displayed by default. I want them to only appear when the parent item is clicked. Currently, clicking the p ...

Upon the initial hover, the data added to the title tag following an Ajax call is not appearing

I am currently working on an ajax request that retrieves information such as username, email, and user_id. Once the ajax call is successful, I use jQuery to append this data to the title tag. The main issue I am facing is that the data is only displayed af ...

Struggling with eliminating the bottom margin on your website?

I can't figure out where this mysterious margin is coming from in the CSS - there's a consistent 30px of space at the bottom of each web page. Any assistance would be greatly appreciated. I know it's probably something simple, but my brain ...

What is the best way to choose all text within a code box without highlighting the entire webpage?

I developed a CSS code specifically for my blogspot site to organize and store all of my code and technical snippets. .code { background:#dae6ef; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color ...

MUI Grid - justify content to the right

I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentat ...

Is there a way for me to attach a link to a picture displayed in a lightbox that directs to an external ".html" file?

I have a platform where users can view images in a gallery and when they click on an image, it opens up in a lightbox. I am trying to add a feature where the opened image can be clicked again to redirect the user to an external page. I attempted to nest t ...

A CSS3 property that does not have a vendor prefix, followed by properties that do have vendor prefixes

As discussed in a response on Stack Overflow, one reason for the necessity of vendor prefixes in CSS properties is to prevent web pages from breaking even if the final specification varies from the implementation by different browsers. In a recent reading ...

Opacity of absolutely positioned elements

I am currently working on creating a popup box that will gray out the surrounding area. The problem I'm facing is that the opacity of the shadow div seems to be overriding that of the popup. I have tried changing the position from absolute to fixed an ...

It seems that CSS shadows are working perfectly on Firefox and Chrome, but unfortunately, they are not displaying on

I have encountered an issue where CSS shadows appear fine on Firefox and Chrome, but do not display in Internet Explorer. Below is the code I am using: -moz-box-shadow: 0 0 20px #000; Can anyone provide a solution for this compatibility problem? Thank ...

How to make the Bootstrap mobile navigation menu taller?

I'm having trouble adjusting the height of the collapsed mobile drop-down navigation. Right now, it's stuck at around 340px and I need it to expand to accommodate all the menu items within the collapsed nav. Despite my efforts searching on Google ...

Is Angular4 preloaded with bootstrap library?

I started a new angular4 project and wrote the code in app.component.html <div class="container"> <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class ...

The table contained within a row-spanning cell fails to fully occupy the cell's height across different browsers

Chrome rendering and code issue I'm struggling to understand why the nested table (highlighted in red) is not taking up the full height of the outer table cell (highlighted in green) which spans 8 rows. This used to work fine, but newer browsers are ...

Submitted input in a text field is automatically displayed in a separate text box

Below is a snippet of HTML code from my AngularJS application <input type="text" class="input-xlarge" id="user_name" ng-model="myModel.text" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-titl ...

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

I'm currently dealing with an issue regarding my accordion design. I have customized the stylesheet using themeroller, but when I collapse one of the sections, the header changes to black instead of reverting back to its original red color. I've ...

The problem with clearing floats in IE7 (as well as 6)

Currently, I am facing an issue where I have a list that I want to split into three columns by using the float left property and then clearing the first column. Everything seems to be working fine in IE8 and FF, however, IE7 is causing the second column t ...

Webpack Encore: SCSS import order causing unexpected issues

When developing with Symfony + Webpack Encore, I aim to split styles into "layout" and "page-based" categories for convenience. However, despite this organization, I still prefer to compile all styles into a single CSS file. To achieve this, I structure my ...

Column-count can result in the flex div dividing the element into two parts

Whenever I utilize column-count with nested divs that have display: flex set, I encounter a problem where elements are cut in half. The suggestion from this answer is to use display: inline-block to prevent this issue. However, when I implement that soluti ...