Estoy haciendo una página web para prácticar ya que me gusta y tengo un problemilla, tengo un mini-formulario de contacto en el footer y al clickar en enviar, me deja editar ese campo desde la web, es decir, doy click en el input que tiene puesto de texto "Enviar" y si le doy click me deja editar el "Enviar"
Os dejo el código y unos fotos de lo que me refiero
footer .contacto {
padding: 30px 0;
}
footer .contacto h3 {
font-size: 34px;
line-height: 34px;
margin-bottom: 40px;
font-weight: 300;
color: #3895ea;
text-align: center;
}
footer section .formulario {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
footer section .formulario input[type="text"],
footer section .formulario input[type="email"],
footer section .formulario textarea {
border: 2px solid #cecece;
border-radius: 5px;
padding: 15px 20px;
font-size: 20px;
color: #a4a4a4;
}
footer section .formulario input[type="text"]:hover,
footer section .formulario input[type="email"]:hover,
footer section .formulario textarea:hover {
border: 2px solid #3895ea;
}
footer section .formulario input[type="text"],
footer section .formulario input[type="email"] {
width: 49%;
margin-bottom: 15px;
}
footer .contacto .formulario textarea {
width: 100%;
height: 100px;
min-width: 100%;
max-width: 100%;
min-height: 100px;
max-height: 300px;
margin-bottom: 15px;
}
footer .contacto .formulario .boton {
margin: auto;
background: #3895ea;
color: white;
border: none;
border-radius: 3px;
padding: 15px 30px;
cursor: pointer;
width: 10%;
}
footer .contacto .formulario .boton:hover {
background: #387bea;
}
<div class="contenedor">
<section class="contacto" id="Contacto">
<h3>Contacto</h3>
<form action="" class="formulario">
<input id="nombre" type="text" placeholder="Nombre" name="nombre" required>
<input type="email" placeholder="Correo" name="correo" required>
<textarea name="mensaje" placeholder="Mensaje:" ></textarea>
<input type="boton" class="boton" type="submit" value="Enviar">
</form>
</section>
</div>