Creating a fully rounded input group using Bootstrap 4

I'm struggling to round my input group like the example shown in this template.

Currently, my output looks like this: my example.

This is my code:

.eersteKnop{
  color: #d32721;
  background-color: white;
}
.btn{
  font-family: 'LatoLight',sans-serif;
}
.round{
  border-radius: 20px !important;
}
.form-control{
  background-color: rgba(255,255,255,0.3);
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white !important;
  opacity: 1; /* Firefox */
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8>;
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0>;
    <meta http-equiv="X-UA-Compatible" content="ie=edge>;
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous>;
    <title>Rounded inputgroup</title>;
</head>
<body>;

            <div class="input-group mb-3>;
                <input type="text" class="form-control round" placeholder="Email address" aria-label="emailaddress" aria-describedby="basic-addon2>;
                <div class="input-group-append>;
                    <button class="btn eersteKnop round pl-4 pr-4" type="button>;Send</button>;
                </div>;
            </div>;

</body>;
</html>

Do I need to utilize position relative/absolute for a solution, or is there another way?

Thank you for your assistance,

Best regards,

Janne

htmlcssbootstrap-4

Answer №1

the !important rule is essential to demonstrate in your scenario the need to manipulate individual values of the border-radius.

.eersteKnop{
  color: #d32721;
  background-color: white;
}
.btn{
  font-family: 'LatoLight',sans-serif;
}
.round{
  border-radius: 20px !important;
}
.round-left{
  border-radius: 20px 0 0 20px !important;
  height: 40px !important;
}
.round-right{
  border-radius: 0 20px 20px 0 !important;
}
.form-control{
  background-color: rgba(255,255,255,0.3) !important;
}
.border-grey {
  border: solid rgb(206, 212, 218) 1px;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white !important;
  opacity: 1; /* Firefox */
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Rounded inputgroup</title>
</head>
<body>

            <div class="input-group mb-3">
                <input type="text" class="form-control round-left" placeholder="Email address" aria-label="emailaddress" aria-describedby="basic-addon2">
                <div class="input-group-append round-right border-grey">
                    <button class="btn eersteKnop pl-4 pr-4" type="button">Send</button>
                </div>
            </div>

</body>
</html>

Answer №2

To establish the stacking order, make use of the position: relative and z-index properties. One method to overlap elements is by adjusting the input element width with negative margins.

.eersteKnop {
  color: #d32721;
  background-color: white;
}

.btn {
  font-family: 'LatoLight', sans-serif;
}

.input-group {
  position: relative;
}

.input-group-append, .form-control {
  position: relative;
  z-index: 3;
}

.round {
  border-radius: 20px !important;
  background: red!important;
}

.form-control {
  background-color: rgba(255, 255, 255, 0.3);
  margin-right: -20px;
  background: blue !important;
}

::placeholder {
  /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white !important;
  opacity: 1;
  /* Firefox */
}
<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Rounded inputgroup</title>
</head>

<body>

  <div class="input-group mb-3">
    <input type="text" class="form-control round" placeholder="Email address" aria-label="emailaddress" aria-describedby="basic-addon2">
    <div class="input-group-append">
      <button class="btn eersteKnop round pl-4 pr-4" type="button">Send</button>
    </div>
  </div>

</body>

</html>

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

Identify when a click occurs outside specific elements

I've been searching for solutions to address this issue, but so far nothing has worked. Here is the JavaScript code I am using: var specifiedElement = document.getElementById('a'); document.addEventListener('click', function(eve ...

javascripthtmlcss

Switching Text in ReactJS from V to X: A Tutorial

I have been utilizing a Switch component from react-switch in my project. import Switch from 'react-switch'; render() { return <Switch onChange={this.onChangeStatus} onClick={this.onChangeStatus} c ...

cssreactjs

The font size of the input DOM element appears smaller than anticipated until the user clicks on the page for the first

I have encountered a strange issue that I haven't been able to find any information about online. In my Angular 2 project, the font size of my bootstrap inputs is set to 1rem. However, after recompiling the project and loading the site for the first t ...

htmlcssangularinputbootstrap-4

Is it possible to dynamically adjust the container size based on its content with the help of *ngIf and additional directives?

I have a single-image container that I need to resize when editing the content. The size should adjust based on the incoming content. See the images of the containers below: Image 1: This is the container before clicking on the edit button. https://i.sst ...

htmlcssangular

Is the Foundation clientHeight causing the body height to not reach 100%?

While creating a basic web page with Foundation, I have run into an issue regarding the dimensions of the body. No matter what adjustments I make, the body's height remains fixed at around 400px, even though it should ideally fill up the entire page. ...

htmlcsszurb-foundationzurb-foundation-5

Numerous requests for .js files originating from a local server

I am currently working on an HTML project where I need to link multiple .js files from my local computer. Below is the structure of my folders: Documents/ ├── js/ | └── .js files └── index.html Within my HTML file, I have included the ...

javascripthtml

Utilizing the box-shadow feature on Bootstrap 4's card element

I'm having an issue with applying a simple shadow to a cards component. The shadow appears mirrored and out of place. My suspicion is that it might be related to the margin-bottom property, but I'm unable to pinpoint the exact reason behind this ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-cards

The style remains constant for the animated element despite hovering over it

I am working on a function that makes an element blink continuously. However, when I move my mouse over the element, I want it to stop blinking and be fully visible (opacity 1). Once I move my mouse away, I want the blinking to resume. Here is the code sn ...

javascriptjquerycssjquery-animateopacity

Color in the diamond shape only to a designated height

I am in search of a unique diamond shape that allows me to fill the color up to a specific height based on an attribute or variable provided. https://i.stack.imgur.com/62U6h.png. I attempted creating the diamond shape and initially considered placing it ...

javascripthtmlcss

Is the CSS property text-transform: Capitalize effective on <option> tags, and if it is, which web browsers support this functionality

I have a <select> element where I want to capitalize the text in each <option> tag. Specifically, I want the options to display as Bar and Baz instead of bar and baz. <style> option { text-transform: Capitalize; } </style> &l ...

htmlcss

Is it possible for PHP to process a multidimensional array being submitted via $_POST along with another field serving as a key in the same form

My web form includes two select fields: "user_id[]" and "equipment_id[]. Here are some key points: I use a Javascript function to duplicate the group of "user_id[]" and "equipment_id[] fields each time I want to add another set. The "user_id[]" field all ...

phphtmlarrays

Pandas now supports exporting data frames to HTML with the added feature of conditional

Is there a way to format a table in pandas where data in each column are styled based on their values, similar to conditional formatting in spreadsheet programs? An example scenario is highlighting significant values in a table: correlation p-value ...

pythonhtmlcssdataframepandas

Developing Table in iOS platform

I am trying to create a table using HTML and embed it in Objective C. However, when I run the code provided below, the table is not displaying as expected. myArray=[[NSMutableArray alloc]init]; array=[NSArray arrayWithObjects:@"1",@"2",@"3", nil]; NSS ...

htmliosobjective-ciphoneweb

Click on every link to reveal a hidden div

When I click on and select the first link in the mainPart, I want to automatically select the first subLink div in the secondPart while hiding the other subLink classes. This sequence should be maintained: when the second link is selected, the second sub ...

javascriptjqueryhtml

The search query highlighted in pagination takes us to page 2

I am currently facing an issue with a search function that provides paginated results. The result I receive is correct, but the problem arises when the highlighted page defaults to page 2 instead of page 1 upon clicking the search button. Despite trying ...

phphtmlpagination

What is the process for extracting text from a web element using C#?

HTML CODE <span id="lbl_OrderNum" class="ff1 fs12 fwb " style="font-size:18px;"> eSYS9778</span> C# CODE driver.FindElementById("lbl_OrderNum").GetAttribute("textContent"); Console.WriteLine("textContent"); Is there a way to extract t ...

c#htmlselenium

Prioritize checked checkboxes at the top of the list

When a radio button is clicked, an Ajax request is triggered and the Div containing checkboxes for employees is retrieved. I am hoping to have the selected checkboxes displayed at the top. I am considering the possibility of using a dynamic index attribut ...

javascriptjqueryhtmlajax

Using animation in CSS is limited to only one time

My goal is to create a pulse animation that triggers when a button is clicked. This image shows the animation midway: https://i.stack.imgur.com/EHDqs.png When the button is clicked, the animation plays once and then stops. However, I want the animation to ...

htmlcss

Using a for loop within a ul tag in HTML

If I needed to display the numbers 0 to 4 on an HTML page, how should I modify this code snippet to achieve that? <ul> {% for i in range(5) %} <li><a>i</a></li> {% endfor %} </ul> ...

pythonhtmldjango-templates

CSS Flexbox - Choose all elements that appear at the start of a new line (Wrap)

Is there a CSS selector that can prevent content insertion on new lines when using the wrap feature in CSS-Flexbox? I am utilizing CSS-Flexbox for a layout with the wrap option, but I do not know the number of lines beforehand. I need a solution where the ...

cssflexbox