How to remove the input type="reset" border without removing my border made in css?

Question

How to remove the input type="reset" border without removing my border made in css?

Navigation

#1 by (1 votes)
#2 by (1 votes)

-1

#botoes {
  width: 270px;
  margin-left: 20px;
}

#botao {
  float: right;
  padding: 5px;
  15px;
  font: bold 12px sans-serif;
  border-radius: 20px;
  box-shadow: 0px 1px 0px white;
  border: 1px solid #9eb9c3;
  background: #edf6f9;
  background: -webkit-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -moz-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -o-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: linear-gradient(#edf6f9 0%, #cde5ee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee', GradientType=0);
  color: #527988;
  box-shadow: 0px 0px 10pc #c9c9c9
}

#botao:hover {
  background: #cde5ee;
  background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: -webkit-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: linear-gradient(to bottom, #cde5ee 0%, #edf6f9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9', GradientType=0);
  cursor: pointer;
}

<div id=botoes>

  <div id="botao">
    <input type="submit" name="enviar" value="Enviar">
  </div>

  <div id="botao">
    <input type="reset" name="limpar" value="Reset">
  </div>

  <div id="lembrar-senha">
    <input type="checkbox" />Lembrar senha
  </div>

html css

asked by anonymous 29.08.2018 / 15:45

2 answers

Center the page horizontally html css mysqli_prepare () expects exactly 2 parameters, 1 given

score 1 · Answer 1

Just in the first line of your CSS you put it like this

[type="reset"] {
  all: unset;
}

For IE you can do this as it does not accept unset ( source )

[type="reset"] {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
}

The important thing is that these styles come early in your CSS, before the custom styles you put.

In this way you reset all the default values of this type of input, then you put the styles you want. OBS: Note that I have not cleaned the styles of btn type="submit" to see the difference between one and the other.

See the applied example with your code.

/* reseta estilos desse input */
[type="reset"] {
  all: unset;
}
  
  #botoes{
width:270px;
margin-left:20px;

}
#botao{
float:right;
padding:5px 15px;
font: bold 12px sans-serif;
border-radius:20px;
box-shadow:0px 1px 0px white;
border:1px solid #9eb9c3;

background: #edf6f9;
background: -webkit-linear-gradient(#edf6f9 0%, #cde5ee 100%);
background: -moz-linear-gradient(#edf6f9 0%, #cde5ee 100%);
background: -o-linear-gradient(#edf6f9 0%, #cde5ee 100%);
background: linear-gradient(#edf6f9 0%, #cde5ee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee',GradientType=0 );
color:#527988;
box-shadow:0px 0px 10pc #c9c9c9
}

#botao:hover{
background: #cde5ee;
background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
background: -webkit-linear-gradient(top, #cde5ee 0%,#edf6f9 100%);
background: linear-gradient(to bottom, #cde5ee 0%,#edf6f9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9',GradientType=0 );
cursor:pointer;
}

<div id=botoes>
      
  <div id="botao">      
        <input type="submit" name="enviar" value="Enviar">
    </div>
  
  <div id="botao">
        <input type="reset" name="limpar" value="Reset">
  </div>

    <div id="lembrar-senha">
      <input type="checkbox"/>Lembrar senha
    </div>

</div>

There are other ways to fix this, but this one I think is more practical because it clears the styles of user-agent and you can start from scratch the styles of your element.

score 1 · Answer 2

Ideally, styling the element itself instead of creating a wrapper for the reset , this only tends to complicate further how you are applying stylization to the elements. At first, when dealing only with the border that you mentioned in the question, simply remove the border (from the child element) and inherit the values of the background and cursor properties of the parent element:

input[type='reset']{
  border: none;
  background: inherit;
  cursor: inherit
}

You can read more about inherit in this answer .

#botoes {
  width: 270px;
  margin-left: 20px;
}

#botao {
  float: right;
  padding: 5px;
  15px;
  font: bold 12px sans-serif;
  border-radius: 20px;
  box-shadow: 0px 1px 0px white;
  border: 1px solid #9eb9c3;
  background: #edf6f9;
  background: -webkit-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -moz-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: -o-linear-gradient(#edf6f9 0%, #cde5ee 100%);
  background: linear-gradient(#edf6f9 0%, #cde5ee 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee', GradientType=0);
  color: #527988;
  box-shadow: 0px 0px 10pc #c9c9c9
}

#botao:hover {
  background: #cde5ee;
  background: -moz-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: -webkit-linear-gradient(top, #cde5ee 0%, #edf6f9 100%);
  background: linear-gradient(to bottom, #cde5ee 0%, #edf6f9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9', GradientType=0);
  cursor: pointer;
}

input[type='reset']{
  border: none;
  background: inherit;
  cursor: inherit
}

<div id=botoes>

  <div id="botao">
    <input type="submit" name="enviar" value="Enviar">
  </div>

  <div id="botao">
    <input type="reset" name="limpar" value="Reset">
  </div>

  <div id="lembrar-senha">
    <input type="checkbox" />Lembrar senha
  </div>