Incorporate text directly into Bootstrap select input on a single line

I am attempting to include an asterisk in a select input field. I can achieve this easily by applying my own CSS, but the challenge is to accomplish this using Bootstrap 3.3.7 or an older version while displaying the asterisk on the same line as shown in this screenshot.

<style>
.asterik-span{
    color: red; font-family: bold; font-size: 16px;
 }
.select-diag{
   width:90%;border:1px solid #ddd; border-radius:3px;height:32px;
 }
</style>

html

 <select  class="select-diag">
    <option >Value1</option>
    <option >Value2</option>
    <option >Value3</option>
</select>
<span class='pull-right asterik-span'>*</span>

Jsfiddle

htmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

If you want to utilize bootstrap exclusively, follow these steps:

<div class="input-group">
  <select  class="form-control">
    <option>Value A</option>
    <option>Value B</option>
    <option>Value C</option>
  </select>
  <div class="input-group-addon">
    <span class='asterik-span'>*</span>
  </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

What are some ways to design scrollbars with a Google Wave-like style?

Is there a way to design scrollbars similar to the ones found in Google Wave? They seem to save space and have an appealing look. I am interested in implementing these customized scrollbars on a div element, just like how Google Wave utilizes them. (im ...

javascripthtml

Is PHP loaded prior to the `html body`?

I'm facing a unique challenge where I am currently transferring variables from a PHP page to hidden HTML inputs. The values are extracted from these hidden inputs using a JavaScript function that is called in the following manner: <body onload=" ...

phpjavascripthtml

Arranging Images with CSS Overlapping

I am striving to make the blue block and red block scale proportionally with the webpage, while also maintaining their position without any shifting up or down. As depicted in this gif, the blocks somewhat accomplish what I desire when scaling diagonally, ...

htmlcssimageresizeoverlap

URL to section of website without the navigation bar portion

I am trying to solve a problem with creating a link that will take me to a specific part of the page while taking into account the height of the navbar. The issue is that since the navbar is fixed to the top with a solid color, it ends up covering part of ...

htmlcsstwitter-bootstrap

Drop-down Navigation in HTML and CSS is a popular way to create

My navigation menu is functioning well and has an appealing design. The HTML structure for the menu is as follows: <div id="menubar"> <div id="welcome"> <h1><a href="#">Cedars Hair <span>Academy</span></ ...

javascriptjqueryhtmlcssnavigation

Send image data in base64 format to server using AJAX to save

My goal is to store a base64 image on a php server using the webcam-easy library (https://github.com/bensonruan/webcam-easy). I added a button to the index.html file of the demo: <button id="upload" onClick="postData()" style=" ...

javascriptphphtmlajaxbase64

Step-by-step guide on incorporating edit, update, and discard functionalities within an Angular Material table component (mat-table)

I am currently working on implementing edit, update, and discard functions in an angular material table. While I have been able to successfully edit and update the table row wise, I am struggling with how to discard table rows. If you would like to see wh ...

javascripthtmlcssangularangular-material

Ways to display the modal once the user initiates the action

Is there a way to delay loading my modal HTML codes until after the user clicks a button, rather than having them load automatically with the template? HTML <!-- Template Codes--> <button data-toggle="modal" data-target="#modal-content" type="bu ...

javascriptjqueryhtmlangularjs

Validation of time picker consistently returns false

While using the daterangepicker library for my form validation with JavaScript, I encountered an issue with the time field. It returns false and displays an error message saying: "Please enter a valid time, between 00:00 and 23:59," preventing me from addi ...

javascriptjqueryhtml

Crafting an interactive saturation effect for mouseover interactions in a circular design

I'm looking to create a unique hover effect for my images. I have both a desaturated version and a full color version of the same image. My idea is to have mousing over the desaturated image reveal a circle spotlighting the color version underneath, a ...

javascriptjquerycssanimationmouseover

Accessing Facebook through Login with only a button visible

I need help with checking the user's login status on Facebook. I have implemented the code provided by Facebook, but all I see is the login button. How can I determine if the user is already logged in or not? function testAPI() { console.log(&apo ...

javascriptjqueryhtmlfacebook

Trouble with arranging nested bootstrap grid cells

Having a bit of trouble with the bootstrap framework. I am trying to set up a simple box with an image on the left side and some text and other elements on the right side. However, I am encountering issues when it is viewed on smaller screens. Here is ...

htmlcsstwitter-bootstrapresponsive-design

Text vanishing upon the loading of an HTML webpage

I am experiencing an issue where the text on my webpage disappears after it loads, and I am struggling to figure out the cause. (I did not create the site) The white text displayed on top of the header image initially appears correctly but then vanishes. ...

jqueryhtmlcss

Effective techniques for managing PHP forms within HTML and CSS by utilizing checkboxes:

I'm struggling with my code, particularly the form section. Here is the HTML code snippet: <form action="index.php/homepage/deleteSelected" method="POST"> <input type="submit" value="Delete Selected"> ...

phphtmlcssajax

Modifying the state object in ReactJS: A step-by-step guide on updating values

Below my query and explanation, you will find all the code. I am currently attempting to update the state in a grandparent class. This is necessary due to file-related reasons, and I am using Material-UI for text boxes. Additionally, I am implementing Red ...

javascripthtmlreactjsmaterial-ui

What's the best way to target an input that's appearing as it slides in from the edge of the screen?

My webpage has an element called #cols that is three times wider than the <body>. This element contains three columns, each exactly as wide as the <body>. When a button is clicked, the #cols element slides over by the width of one column while ...

javascripthtmlcssonfocus

JavaScript Functions for Beginners

I'm currently facing some challenges with transferring the scripts and HTML content from the calendar on refdesk.com. My task involves moving the JavaScript to a separate stylesheet and utilizing those functions to replicate the calendar on an HTML pa ...

javascripthtmlcalendar

The updated version of Angular from 13 to 16 has implemented a new default value for primary colors

I recently upgraded my angular (+material-ui) system from version 13 to 16, and encountered an issue with the primary color of my custom theme. It seems that the value is no longer being recognized and defaults to blue. After updating the angular version, ...

cssangularsass

Is there a way to prevent the window.status from appearing?

I currently have the following code snippet: <a class="button accessLink" id="loginLink" href="#" data-action="Login" data-dialog="access" data-disabled="false" data-entity="n/a" ...

javascriptjquerycsshtml

The symbol "#" appears in my URL whenever the link is clicked

Seeking guidance on a URL issue that I am facing. Whenever I click the source link, it adds a pound sign to the URL. How can I prevent this from happening? Can someone assist me in identifying the necessary changes required in my jQuery or HTML code? Bel ...

javascriptjqueryhtml