Issue with border radius not applied to input-group in Bootstrap 3

Can anyone explain why the input-group in Bootstrap 3.4 is missing all border radius?

<form action="{{ route('dashboard.users.index') }}" method="get">
   <div class="input-group">
        <input type="text" name="search" class="form-control">
        <span class="input-group-btn">
           <button class="btn btn-default" type="submit">
             <i class="fa fa-search"></i>
           </button>
         </span>
     </div>
</form>

Inspect Element:

.input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn-group:not(:last-child)>.btn, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

Is it necessary to customize it with my own CSS?

csstwitter-bootstrap-3

Answer №1

It appears to be intentional. Take a look at the image (I used your code, with text added inside 

<i class="fa fa-search"></i>
):

You have two input elements side by side. The outer corners have border-radius applied while the inner corners do not, resulting in a visually pleasing design. If you wish to change this, you will need to create custom CSS to override the default styling.

Answer №2

By mistake, I included bootstrap rtl before the original bootstrap.min.css file while using it. Once I corrected the order of inclusion, the issue was resolved. Thank you for your assistance!

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

Troubleshooting a problem with the Jquery cycle plugin in HTML and CSS

Hi there! I've successfully integrated the jQuery cycle plugin into my slideshow, which is working great. However, I want to make the navigation controls (previous, next, pause, play) display as background images instead of visible text links. I' ...

htmlcssjquery-cycle

The issue with Angular 4 imports not refreshing in a .less file persists

Currently, I am in the process of developing a small Angular project that utilizes less for styling purposes. My intention is to separate the styling into distinct folders apart from the components and instead have a main import file - main.less. This fil ...

cssangulartypescriptimportless

Transform your ordinary HTML select into a stylish span with this custom CSS class

I need help making a select element appear like a span under certain conditions. The CSS class I currently have works with input boxes, but not with dropdowns. Is there any advice on how to style the select element to look like a span without actually repl ...

jquerycssdrop-down-menuhtml

Is there excessive spacing following an A tag or an img tag?

Hi there, I'm currently facing an issue while building a table cell using the div tag. Specifically, I have encountered some unwanted spacing after my img within the cell. <div style="display:table"> <div style="display:row"> <div s ...

htmlcsstagsimagespace

Displaying videos in full screen using HTML5

I am attempting to create a fullscreen webpage with a video using the following code: <video id="backgroundvideo" autoplay controls> <source src="{% path video, 'reference' %}" type="video/mp4"> </video> ...

htmlcsshtml5-video

Google Maps Marker disappeared upon relocation to the current application

After reading several articles on missing markers, I'm still facing a unique issue that doesn't seem to have a clear solution. The problem arises when attempting to render a basic map with just one marker and a fixed location. Despite Chrome dev ...

cssgoogle-mapscanvasgoogle-maps-api-3marker

adjust the size of a form field to match the background image dimensions

I'm encountering an issue while trying to solve this particular challenge: My goal is to integrate a login box onto a full-screen image. Although I've come across numerous methods for incorporating an image into a form field, my task requires me ...

css

Effortlessly navigate between Formik Fields with automated tabbing

I have a component that validates a 4 digit phone code. It functions well and has a good appearance. However, I am struggling with the inability to autotab between numbers. Currently, I have to manually navigate to each input field and enter the number. Is ...

javascriptcssreactjsnext.jsformik

Positioning a div to the right of another div within a container (box)

I'm currently trying to line up two divs alongside each other within a box. Using angularJS, I am dynamically generating input boxes and looking to include an image for the delete option next to each input box. Despite using "display: inline-block", I ...

javascriptjqueryhtmlcssangularjs

Tips for adding a space before the footer in a document

Implementing a Top Navigation Bar with grey spacing Avoid having any extra space just before the footer: Organizing my Layout File ("navigation_top" refers to the black navigation bar at the top) %body = render "navigation_top" .main-content .cont ...

cssruby-on-railshaml

The pagination feature for Swiper is experiencing issues across both desktop and mobile platforms

I am having an issue with the pagination display in the text. I would like it to appear below the text as a standalone item for better visibility. Another problem arises when viewing the page on mobile devices - the hamburger menu displays behind the slid ...

javascripthtmlcssswiper.js

What is the best way to line up my columns when they are split between groups of three and two?

I am having trouble aligning my columns in the way I want. The image shows that some tables have 3 columns while others have 2, and I would like to align the blue with the blue and the red with the red as shown in the picture: https://i.stack.imgur.com/1bL ...

htmlcsshtml-table

Resetting values in Javascript and JQuery when clicking a button

I've recently implemented a feature on my website header where clicking on the search button reveals a search bar, and clicking on the account button reveals an account bar. With some valuable assistance from Madalin, I was able to achieve this functi ...

javascriptjquerycss

Collision of CSS styles with a different CSS stylesheet causing conflicts

Currently, I am in the process of developing a website and have encountered a specific issue. Within my page, there are various divs and tables present. I have meticulously crafted classes and styles to customize the appearance of these elements to align ...

jqueryhtmlcss

Troubleshooting problems with anchor-targets in Skrollr

I am experimenting with having divs overlap each other as the page is scrolled using Skrollr. Initially, I was able to achieve the desired effect with two divs. However, when trying to incorporate a third div, only the first and last ones seem to work prop ...

javascriptjqueryhtmlcssparallax

Conceal the .dropdown-backdrop from bootstrap using solely CSS styling techniques

Is there a way to hide the .dropdown-backdrop element from Bootstrap for a specific dropdown on a webpage using only CSS? I found a solution that involves Javascript, you can view it on JSFiddle here. However, I am hoping to achieve this without relying o ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

Is there a way to dynamically access BEM-style selectors using CSS modules?

For instance, I have this specific selector in my App.module.css file: .Column--active I want to access this selector from the App.js file in React using CSS modules. After importing all selectors from the CSS file as import styles from './App. ...

javascripthtmlcsscss-modulescss-loader

Blog entries alternating between a pair of distinct hues

I want to create a design where each post container has a different color from the one next to it. Essentially, I would like the containers to alternate between two distinct colors. The left side shows how it currently appears, while the right side depict ...

javascripthtmlcss

The color of the text on the Homepage appears differently on iOS Safari

At the top of my homepage, I have displayed the company phone number with white text color. It appears correctly as white on my desktop browsers (Firefox and Chrome), also on my Droid phone, but shows up as dark gray on my iOS phone using Safari. Why is th ...

htmlioscsscolorssafari

Can a shape similar to an inverted circle be created using CSS and jQuery?

I'm stumped on how to create an inverted circle in the corners. I've included a picture for reference. https://i.stack.imgur.com/jeNdh.jpg Is it feasible to achieve this effect using CSS3 or maybe jQuery? ...

javascriptjquerycsscss-shapes