Issue with Bootstrap's has-feedback icon not displaying correctly when working in conjunction with a dropdownlist

I'm encountering an issue regarding the alignment of bootstrap feedback. The form-control-feedback when used with a dropdown list does not align correctly. I would like it to appear in the right corner after the dropdown list, similar to how it displays in IE 11 (see screenshot below). It seems to work somewhat in IE 11 but not in other browsers such as Firefox, Chrome, and Safari. After doing some research, I have been unable to find a solid workaround or solution, and I am unsure if this is a bug or intended behavior.

You can view a fiddle I created here: http://jsfiddle.net/12qcwbbw/.

It appears that this CSS rule 

.has-feedback .form-control{padding-right: 42.5px;}
only functions properly in IE 11.

Below are screen-casts showing the rendering on different browsers;

This is how it looks in IE 11 and what I desire in other browsers:

https://i.sstatic.net/Q466e.jpg

Firefox

https://i.sstatic.net/aTAJh.jpg

Google Chrome

https://i.sstatic.net/ejWBa.jpg

Safari

https://i.sstatic.net/freHU.jpg

Here is my HTML code snippet:

<div class="form-horizontal middle" >    
<div class="col-xs-12 col-sm-12">
    <div class="form-group">
        <label class="col-xs-12 col-sm-3 control-label">Full Name</label>
        <div class="col-xs-12 col-sm-9 has-feedback" >
            <input type="text" class="form-control text-capitalize" name="FullName" id="txtFullName"
                   placeholder="Full Name" />
            <span class="glyphicon glyphicon-remove text-danger form-control-feedback">
            </span>
        </div>
    </div>    
    <div class="form-group ">
        <label class="col-xs-12 col-sm-3 control-label">Gender</label>
        <div class="col-xs-12 col-sm-9 has-feedback">
            <select class="form-control">
                <option>Male</option>
                <option>Female</option>
                <option>Other</option>
            </select>
            <i class="glyphicon glyphicon-remove text-danger form-control-feedback"></i>
        </div>
    </div>
</div>

Any suggestions for a workaround would be greatly appreciated!

htmlcsstwitter-bootstrap

Answer №1

There isn't a universal solution for styling the <select> element across all browsers due to differences in rendering. However, there is a CSS workaround that can help create a consistent visual appearance.

The trick involves using a combination of CSS styles to wrap the <select> element within a <div>, which includes an arrow image as a background to mimic the default dropdown arrow. This snippet demonstrates the approach:

.select-style {
  padding: 0;
  margin: 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  background: #fff url('arrow-image-url') no-repeat calc(100% - 10px) 50%;
}

.select-style select {
  padding: 5px 8px;
  width: 100%;
  border: none;
  box-shadow: none;
  background-color: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: rgba(0, 0, 0, 0.6);
}

To adapt this technique for your specific case where the <select> element is within a .has-feedback container, you may need to adjust the CSS properties accordingly. For instance, modifying the background position of the arrow icon or applying additional styles like so:

.form-control + .form-control-feedback {
  right: 12px;
}

.select-style {
    padding: 0;
    margin: 0;
    border: 0 solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff url('arrow-image-url') no-repeat calc(100% - 30px) 50%;
}

.select-style select {
    padding: 5px 8px;
    width: 100%;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: rgba(0, 0, 0, 0.6);
}

.input-group > .select-style {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

This adjusted CSS code can be applied to scenarios where <select> elements are used alongside Bootstrap classes such as .form-control-feedback and .input-group. By customizing these styles, you can achieve a more consistent and visually appealing design for your dropdowns.

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

Unable to create a universal <header> and <footer> to be displayed across all pages

After trying to separate the <header> and <footer> into external files, everything seemed to work fine in the console. However, when running the code, it ended up returning undefined. This is the HTML for the Footer: <footer id="footer ...

javascripthtmljquerycssbootstrap-4

Ways to combine text styling with images, stroke effects, and shadows all at once

I am looking to enhance my text with a background image, a text-stroke, and a text-shadow. The issue I am facing is that the text-shadow appears on top of the background image. Does anyone have a solution for placing the shadow behind the image? If you te ...

csstextbackground-imagetext-shadow

Experiencing a problem with JQuery Offset when a fixed position is applied to a

My website has a page layout and style similar to the example provided in this JsFiddle. When I use JQuery to click on a button, the content is displayed correctly as shown below: https://i.sstatic.net/V89qa.jpg However, if I scroll down the page first ...

javascriptjqueryhtmlcss

What would be the most appropriate way to organize the following data structure?

I'm facing a challenge with organizing content on a non-CMS website for the first time. I have about 250 individuals, each with a first name, last name, telephone number, email address, and some additional information. My initial thought was to use a ...

jqueryhtmlarrayssortingstructure

Can you explain the process of NuxtJS css extraction for creating static websites?

I am currently working on creating a static website using my minimal code with Nuxt. This code includes integration of the tailwindcss toolkit and vue2-leaflet. When I run nuxt generate I end up with two CSS files - one for the tailwindcss styles and an ...

cssvue.jsleafletnuxt.js

"Troubleshooting problem with padding-right in Internet Explorer when displaying background image within

Encountering a problem with the IE browser (all versions up to IE 10). Here's the issue. The text in the input box is overlapping its background image. Unable to place this image in the parent div due to the dynamic nature of the input box and other ...

htmlcssinternet-explorerinput

Tips for properly sizing 13 images in Next.js

I've been facing some challenges while working on a responsive website, particularly with getting the sizing right. When viewing my image on mobile, everything looks good: https://i.sstatic.net/gNm14.png However, when I switch over to desktop view, ...

htmlcssnext.jsresponsive-design

Collection of numbers with decimal points

Can one use <li> numbers in this format?: 1.1 First Item 1.2 Second Item 2.1 Other item ...

html

Eliminating the glow effect, border, and both vertical and horizontal scrollbars from a textarea

Dealing with the textarea element has been a struggle for me. Despite adding decorations, I am still facing issues with it. The glow and border just won't disappear, which is quite frustrating. Could it be because of the form-control class? When I rem ...

javascriptjqueryhtmlcss

Crafting a website in HTML

Hello there! I am looking to create a flexible HTML and CSS page that adjusts in size when the user resizes the browser window. I want the page to be responsive to different resolutions. I've explored various solutions on this platform, but unfortunat ...

htmlcssdrop-down-menu

Streaming audio live using HTML5 and NodeJS technology

I'm currently working on developing a website that functions as a VoIP recording application. The main goal is to capture audio from the microphone, send it exclusively to the server for storage and then have the server distribute the audio to connect ...

javascripthtmlnode.jswebrtc

What is the best way to retrieve a style property from a <style> tag using JavaScript?

Is there a way to retrieve CSS properties set in the <style> tag in JavaScript, rather than just those set in the element's style attribute? For example: <style> div{background:red;} </style> How can I access these styles, such ...

javascripthtmlcss

The Javascript function is designed to function exclusively with onclick events or setTimeout functions

I am currently working on a website that I want to be responsive to the window size. However, I am facing an issue with vertical alignment. I have created a jQuery function to handle this, and it works well for divs with images but not so well for a div wi ...

javascriptjqueryhtmlwebraphael

Obtaining the href content from a specific class using Selenium

I am attempting to extract information from a webpage that contains the following HTML: <div class="someclass"> <p class="name"><a href="#/word/1/">helloworld</a></p> </div> My objective is to retr ...

pythonhtmlcssxpathselenium

My CSS content seems to be fitting correctly, but it appears larger than anticipated. Where have I gone

I've been working on customizing my webpage for mobile phones, but I've encountered an issue. When I use the inspect tool in Chrome to make the "screen" smaller, the webpage itself appears smaller but the body element size remains unchanged, as i ...

htmlcss

Issue with Jquery function not executing on second attempt

/** Creates a table of iTunes data in HTML format **/ var appendValues = function(songArray) { songArray.each(function() { var title = $(this).find("im\\:name").eq(0).text(); var songImage = $(this).find("im\\:image").eq(0).text(); var ...

javascriptjqueryhtmlajaxweb

Guide on incorporating a glyphicon into a dropdown menu link by leveraging the link_to helper in Ruby on Rails

Just getting started here and I have a question... I want to include glyphicons on the links in a dropdown menu using the link_to helper in my Ruby on Rails app. This is the code I currently have: <ul class="nav_item pull-right"> <li cla ...

cssruby-on-railsrubytwitter-bootstrap

How should form elements be named and handled for avoiding duplication?

Suppose my form contains 2 inputs <input name="person_name" value="John" type="text" /> <input name="person_name" value="Jean" type="text" /> After submitting the form, which "person_name" will be received? John or Jean? Also, what if I have ...

htmlforms

Issue with manipulating background color with JQuery in CSS

Currently, I have a simple navigation menu consisting of five links. The navigation bar is styled with a background image and changes to a darker shade when hovered over. My goal is to implement a jQuery script that dynamically changes the color of the act ...

jqueryhtmlcss

Using jQuery to apply the "a" class with the addClass method

The html structure below is giving me trouble: <div class="sub"> <a href="#" id="people">People</a> </div> The CSS for the "a" element is as follows: color:#999999; font-size:31px; I am attempting to use jQuery to change ...

jquerycssaddclass