how do I style this "input" like this "a" tag?-CodePudding

(The "input" is on the left and the "a" tag is on the right)

I need to style the "input" tag exactly like the "a" tag. I am just talking about the box surrounding it. Also, I can only use the "input" tag because I need to get data from this button

a,input {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    margin: 5px;
    font-size: 1.5rem;
    padding: 3px; 
    border-radius: 5px;
}

CodePudding user response：

Input and a elements have different native style, you can reset the style and apply a mutual class.

For position you can use align-items: stretch or align-items: center from flexbox

For exemple :

<div >
  <input type="text" value="foo" />
  <a href="#"> bar </a>
</div>


.inner {
  background-color: #ebebeb;
  height: 140px;
  display: flex;
  align-items: center;
}

.inner input, 
.inner a {
  background-color: #000;
  color: #fff;
  padding: 12px;
  margin: 12px;
  border: 0;
  font-family: Arial;
  font-size: 1em;
  text-decoration: none;
}

You can also replace .inner input, .inner a by .yourClass and add on input and a DOM element

CodePudding user response：

Here I have provided a css attributes for the class inner and also added a style for the elements input and a.

.inner {
  background-color: #ebebeb;
  height: 140px;
  display: flex;
  align-items: center;
}

.inner input {
  background-color: blue;
  color: #fff;
  padding: 3px;
  border-radius:5px;
  margin: 12px;
  border: 0;
  width:45px;
  text-align:center;
  font-family: Arial;
  font-size: 1em;
  text-decoration: none;
}

 
.inner a {
  background-color: blue;
  color: #fff;
  padding: 3px;
  border-radius:5px;
  border: 0;
  font-family: Arial;
  font-size: 1em;
  text-decoration: none;
}

<div >
  <input type="text" value="save" />
  <a href="#"> cancel </a>
</div>