How to put custom icon beside input element-CodePudding

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 >
    <div >
      <input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID" >
      <div id="discord-id-button" type="submit" >
      </div>
</body>

CodePudding user response：

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 >
    <div >
      <input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
      <button id="discord-id-button" type="submit"  />
    </div>
  </div>
</body>

CodePudding user response：

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 >
  <input type="text" id="discord-id-input" name="discord-id-input" placeholder="Discord ID">
  <button id="discord-id-button" type="submit" >
  </button>
</div>