How can you put a line inside a input?-CodePudding

I'm trying to build a input with a line inside of it in the middle. But I don't seem to know how to build it as the line always falls in the bottom but it gets inline with the button's border.

Here is what I've tried so far:

  <div>
              <input className={styles.replyInput} placeholder='Reply...' />
              <div className={styles.grayLine}></div>
            </div>

And here is the CSS:

.replyInput {
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    padding: 10px;
    outline: none;
    width: 100%;
}

.grayLine {
    width: 80%;
    margin-left: 5%;
    position: absolute;
    border: 1px solid #E0E0E0;
}

I'm trying to build this with CSS

CodePudding user response：

You can use some approach like this

.mainDiv{
   position:relative;
   width: 80%;
   padding: 2%;
   height: 60px;
   border: 2px solid #E0E0E0;
   border-radius: 8px;
}

.replyInput {
    outline: none;
    border: none;
    width: 100%;
}

.grayLine::after {
    position: absolute;
    width: 95%;
    height: 1px;
    content: "";
    background: #E0E0E0;
    margin-top: 10px;
}

.icons {
    margin-top: 20px;
}

<div class='mainDiv'>
      <input class='replyInput' placeholder='Reply...' />
      <div class='grayLine'></div>
      <div class='icons'>Some icons</div>
 </div>

CodePudding user response：

.replyInput {
display:block;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    padding: 10px;
    outline: none;
    width: 100%;
    
}

.grayLine {
    width: 80%;
    top:50%;
    position: absolute;
    border: 1px solid #E0E0E0;
    margin-left:20%;
}

#a{
position:relative;
}

      <div id='a'>
      <input class='replyInput' placeholder='Reply...' />
      <div class='grayLine'></div>
      </div>

CodePudding user response：

Use <hr>

fieldset {
  padding: 3px 6px;
  border-radius: 10px;
  border-color: #fefefe;
}

input {
  display: inline-block;
  width: 90%;
  border: 0;
  outline: none;
}

hr {
  margin: 3px 0;
  border-color: #fefefe;
}

menu {
  margin: 0 0 0 -40px;
}

button {
  border: 0;
  background: transparent;
  cursor: pointer;
}

.font::before {
  content: '\f031';
  font-size: smaller;
}

.font::after {
  content: '\f031'
}

.contacts::before {
  content: '@';
}

.emoticons::before {
  content: '\f599'
}

.attach::before {
  content: '\f0c6'
}

.send {
  float: right
}

.send::before {
  content: '\f1d8'
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet">
<fieldset>
  <input id='reply' class='component' placeholder='Reply...'>
  <hr>
  <menu>
    <button class='font fa' type='button'></button>
    <button class='contacts fa' type='button'></button>
    <button class='emoticons fa' type='button'></button>
    <button class='attach fa' type='button'></button>
    <button class='send fa' type='button' disabled></button>
  </menu>
</fieldset>