Place a button next to a text input field using Bootstrap

How can I create a drop-down menu on the left side of my input text, featuring a '+' or '-' symbol?

For example: [+][input text]

<div class="form-group btm_border">
    <label class="col-sm-4 control-label" for="first_name">
        <?php echo translate('modify_amount') ?>
    </label>
    <div class="col-sm-6">
        <div class="form-group" style="display:inline-block; float:none;">
            <select class="selectpicker">
                <option value="1">+</option>
                <option value="2">-</option>
            </select>
            <input type="text" name="rebate_amount" id="rebate_amount" value="0" placeholder="0" class="form-control required">
        </div>
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here is a suggested code snippet for you to try:

<div class="form-group btm_border">
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
            <label class="control-label" for="first_name"><?php echo translate('modify_amount') ?></label>
        </div>

        <div class="col-lg-1 col-md-1 col-sm-4 col-xs-4">
            <select class="selectpicker form-control">
                <option value="1">+</option>
                <option value="2">-</option>
            </select>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-8 col-xs-8">
            <input style="float: left" type="text" name="rebate_amount" id="rebate_amount" value="0" placeholder="0" class="form-control required">
        </div>
    </div>
</div>

Answer №2

Utilizing the input-group-addon class from bootstrap and placing the <select> within that div has proven to work effectively, although it does require some CSS adjustments for a more aesthetically pleasing appearance. Hopefully this solution will suffice.

select::-ms-expand
            {
                display: none;
            }
            select
            {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;
                border: none;
                background: none;
            }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="form-group btm_border">
  <label class="col-sm-4 control-label" for="first_name"><?php echo translate('modify_amount') ?></label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <select>
                            <option value="1">+</option>
                            <option value="2">-</option>
                        </select>
                    </div>
                    <input type="text" name="rebate_amount" id="rebate_amount" value="0" placeholder="0" class="form-control required">
                </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

Hiding and Revealing Different Divs using Hide/Show_trait

I have implemented a Javascript code to toggle the visibility of different divs based on icon clicks. However, I am facing an issue where clicking on another icon does not close the previously opened div. I want only one div to be open at a time and for th ...

javascripthtmltwitter-bootstrapshow-hide

Adding a div with a canvas element is malfunctioning

I've been experimenting with using canvg to convert an SVG within a div into a canvas. So far, the conversion is working fine but when I try to copy the innerHTML of the div to another div, it's not functioning properly. The canvas is being gener ...

javascriptjqueryhtmlcanvascanvg

What are some solutions for resolving the problem with the anchor attribute in Safari?

There is a problem with the anchor tag used in my website. The number 619-618-1660 is being displayed when I view the site on Safari browser or an iPhone, even though it is written as (href="tel:619-618-1660"). See the image at the link below for reference ...

phpwordpresshtmlcss

The widths of inputs vary between FireFox and Chrome

I've been investigating why the widths in FireFox and Chrome show a significant difference. This variation is causing a problem with my Modal in the views. Chrome: https://i.sstatic.net/D0lgu.png FireFox: https://i.sstatic.net/do4YU.png Upon comp ...

htmlcsswidthpixel

Limiting the number of characters allowed in an HTML5 number input field on an iPhone

We are facing an issue where the "maxlength", "min", and "max" HTML attributes do not work as expected on an iPhone when using the following markup: <input type="number" maxlength="2" min="0" max="99"/> On iPhone 4, instead of restricting the numb ...

iphonehtmljquery-mobileinput

What is the correct way to implement inheritance in CSS?

Here is the CSS code that defines different header styles: .head_red{ background-image: url(../../Images/box_header_red.png) !important; background-repeat:no-repeat; height: 59px; } .head_blue{ background-image: url(../../Images/box_heade ...

css

With the simple click of a button, I aim to refresh and enhance the appearance of a polygon

My goal is to create a button that, when clicked, causes the gray stripe in the middle to transition to the right. I am not very familiar with HTML, CSS, and JavaScript so I could use some help figuring out how to achieve this effect. Here is a quick illus ...

javascripthtmlcss

Why do my designs always seem to fall apart as soon as I include a figcaption?

My website has a gallery, but as soon as I add figcaption to the images, everything seems to shift to the center. What am I doing wrong? I'm at a loss on how to fix this issue. #image{ position: inherit; width:300px; -webkit-transition:all 1s; tra ...

htmlcsswidthgallery

Tips for locating the li element with the .multiselect class that comes before the one with the active

I have a unique situation where I am working with a list of select boxes. Let's say that the parent element of all the elements in the list is .multiselect, and when a user selects an option, the .active class is added to it. $(".multiselect-contai ...

javascriptjqueryhtml

Creating a custom colored progress bar in Angular 2 using Bootstrap 4

I've been working on implementing a bootstrap progress bar with ng-bootstrap components. The documentation outlines 4 preset coloring options using the directive "type": "success", "info", "warning", or "danger". () To customize the colors, I made ad ...

angularbootstrap-4ng-bootstrap

Targeting HTML tags, styling names, and class names using CSS

In the markup below, I am trying to target three specific points using CSS. img style*=right class=media-element I attempted to use the code below, which did not work: img[style*="right"][class="media-element"] {margin-left:10px;} However, selecting t ...

htmlcsscss-selectors

Creating a curved edge for a shape in React Native can add a stylish and

Issue Description I am working on an app and struggling with styling the bottom navigation bar. It's more complex than what I've done before, especially the curved top edge of the white section and the area between the blue/green circle and the ...

javascriptcssreactjsreact-native

Adjusting the width of a DIV element within a table cell

In my ASP.NET application, I am facing an issue with table column widths not rendering as expected in the browser. Despite setting the column width to 100px, it appears as either 96px or 108px. The problem seems to be related to having a div inside the th ...

htmlcss

Guide to displaying a task within a table cell after a user submits the form

<?php $servername = "localhost"; $username = "u749668864_PandaHost"; $password = "Effy1234"; $dbname = "u749668864_PandaHost"; $q = $_REQUEST["task"]; $task = $q; echo $task; $conn->close(); ?> Exploring the world of ajax has left me scratching ...

javascriptphphtmljqueryajax

Tips for managing event listeners with JavaScript validation and PHP

Hi everyone, I'm a new student learning Web Programming and focusing on Web Development. I encountered an issue while trying to use JavaScript validation with a form submitted to a PHP file. I attempted to utilize event listeners to check the input fi ...

javascriptphphtmlcssforms

I am working on an HTML form that is designed vertically, but I am unsure of how to arrange two text fields side by side on the same line

I'm struggling with formatting my HTML form to have two text fields on the same line instead of stacked vertically. In the example below, I want the Size, Width, and Height fields to be aligned horizontally rather than one below the other. <form c ...

htmlcsswordpresscss-floatcustomization

Utilizing the ajaxForm plugin within a view that is generated as an AJAX response

As I develop a messaging system for my website, I have implemented a flat mailbox design. This means that accessing the inbox or composing a new message does not navigate to a different page; instead, it toggles between div elements. When a user clicks on ...

javascriptjqueryhtmlajax

Calculating hidden TR height in JQuery results in a value of 0

Currently, I am attempting to determine the height of a hidden TR element. Oddly enough, when using the jQuery height extension method, it keeps returning 0. When the TR is visible, the correct height is displayed. This issue contradicts my previous experi ...

jqueryhtmlcsshtml-table

Angularjs orderBy filter causing deletion of incorrect row

When creating a table with AngularJS, I utilized the orderBy filter. However, after implementing this filter, my delete function started removing rows unexpectedly without me clicking to delete. Below is the code for the filter: <tr class = "table-row ...

htmlcssangularjsfilter

Creating movement effects for a line on an HTML5 canvas following a previous animation

I am facing an issue where my straight line starts animating towards the circle right at the beginning of page load. I am struggling with finding the logic to make the line animate in the opposite direction after the first animation is completed (which is ...

javascriptjqueryhtmlanimationcanvas