'How to put custom icon beside input element

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:

Image

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>
htmlcss


Solution 1:[1]

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>

Solution 2:[2]

You could use flexbox, like so (Notice I changed the submit button to an HTML button):

.form-control {
  display: flex;
  align-items: center;
  gap:10px;
}

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

.submit {
  background-image: url("https://img.icons8.com/material-two-tone/24/000000/arrow.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  outline: none;
  border: none;
  width: 23px;
  height: 23px;

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions