How to put custom icon beside input element

March 17, 2022

I’m currently trying to use HTML together with CSS and my current problem is that I am not able to connect the input beside the arrow button:

I’m here asking how I am able to make the >> button as a "submit" button and that its beside the input?

--------------
|            |  >>
--------------

body {
  padding: 5px 15px 30px 15px;
  width: 500px;
  height: 250px;
  background-image: url('../images/bg2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.text-center {
  text-align: center;
}

.form-control {
  margin: 600;
}

label {
  display: block;
}

select,
input {
  min-width: 100px;
  border: 1px solid #fff;
  background: #292942;
  color: #fff;
  border-radius: 25px;
  padding: 5px 10px;
}

.mt10 {
  margin-top: 20px;
}

.submit {
  background-image: url('../images/arrow.png');
  background-repeat: no-repeat;
  background-position: center center;
  width: 23px;
  height: 23px;
  margin-left: 350px;
}

<body>
  <div class="text-center">
    <div class="form-control">
      <input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID" class="mt10">
      <div id="discord-id-button" type="submit" class="submit">
      </div>
</body>

>Solution :

Some simple flexbox properties get things into shape.

Other tips:

Use a button for submit. If you don’t want button styling, take it off. Semantic use of elements is critical for consistent, familiar usage and for accessibility.
Whenever you find yourself using huge margins for layout, take a step back. That’s not a good approach. Use flexbox or CSS grid to create a structure in which your content resides, and use margin or padding only to crate a bit of space between elements, or between grid containers and content.
Don’t put hard widths on the body. That should almost always remain flexible to fit the screen.

body {
  padding: 5px 15px 30px 15px;
  /* width: 500px; */
  height: 250px;
  background-image: url('../images/bg2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.text-center {
  text-align: center;
}

.form-control {
  margin: 600; /* invalid value */
  display: flex;
  align-items: center;
  justify-content: center;
}

label {
  display: block;
}

select,
input {
  min-width: 100px;
  border: 1px solid #fff;
  background: #292942;
  color: #fff;
  border-radius: 25px;
  padding: 5px 10px;
}

.mt10 {
  margin-top: 20px;
}

.submit-btn {
  background-image: url('https://via.placeholder.com/30');
  background-repeat: no-repeat;
  background-position: center center;
  width: 23px;
  height: 23px;
  margin-left: 12px;
  /* margin-left: 350px; */
}

<body>
  <div class="text-center">
    <div class="form-control mt10">
      <input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
      <button id="discord-id-button" type="submit" class="submit-btn" />
    </div>
  </div>
</body>