html - limpiar - ¿Cómo se ingresa el botón de entrada y envío con CSS?
limpiar formulario html despues de enviar (11)
Cuando diseñe un tipo de entrada, envíe el siguiente código.
input[type=submit] {
background-color: pink; //Example stlying
}
Estoy aprendiendo CSS. ¿Cómo se ingresa el botón de entrada y envío con CSS?
Intento crear algo como esto, pero no tengo ni idea de cómo hacerlo
<form action="#" method="post">
Name <input type="text" placeholder="First name"/>
<input type="text" placeholder="Last name"/>
Email <input type="text"/>
Message <input type="textarea"/>
<input type="submit" value="Send"/>
</form>
En realidad, esto también funciona genial.
input[type=submit]{
width: 15px;
position: absolute;
right: 20px;
bottom: 20px;
background: #09c;
color: #fff;
font-family: tahoma,geneva,algerian;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid #999;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<a href="#" class="btn">Push</a>
</div>
</body>
</html>
Estilo CSS
a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}
HTML
<input type="submit" name="submit" value="Send" id="submit" />
CSS
#submit {
color: #fff;
font-size: 0;
width: 135px;
height: 60px;
border: none;
margin: 0;
padding: 0;
background: #0c0 url(image) 0 0 no-repeat;
}
La interfaz de usuario del elemento de formulario está controlada de alguna manera por el navegador y el sistema operativo, por lo que no es trivial diseñarlos de forma muy confiable de forma que se vea igual en todas las combinaciones comunes de navegador / sistema operativo.
En cambio, si desea algo específico, le recomendaría utilizar una biblioteca que le proporcione elementos de formulario que se puedan personalizar. uniform.js es una de esas bibliotecas.
Lo hice de esta manera en base a las respuestas dadas aquí, espero que ayude
.likeLink {
background: none !important;
color: #3387c4;
border: none;
padding: 0 !important;
font: inherit;
cursor: pointer;
}
.likeLink:hover {
background: none !important;
color: #25618c;
border: none;
padding: 0 !important;
font: inherit;
cursor: pointer;
text-decoration: underline;
}
Muy simple:
<html>
<head>
<head>
<style type="text/css">
.buttonstyle
{
background: black;
background-position: 0px -401px;
border: solid 1px #000000;
color: #ffffff;
height: 21px;
margin-top: -1px;
padding-bottom: 2px;
}
.buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; }
</style>
</head>
<body>
<form>
<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>
</form>
</body>
</html>
Esto está funcionando He probado.
Para mayor confiabilidad, sugiero dar nombres de clase o id a los elementos para el estilo (idealmente una class para las entradas de texto, ya que presumiblemente habrá varias) y una id para el botón de enviar (aunque una class funcionaría como bien):
<form action="#" method="post">
<label for="text1">Text 1</label>
<input type="text" class="textInput" id="text1" />
<label for="text2">Text 2</label>
<input type="text" class="textInput" id="text2" />
<input id="submitBtn" type="submit" />
</form>
Con el CSS:
.textInput {
/* styles the text input elements with this class */
}
#submitBtn {
/* styles the submit button */
}
Para navegadores más actualizados, puede seleccionar por atributos (usando el mismo HTML):
.input {
/* styles all input elements */
}
.input[type="text"] {
/* styles all inputs with type ''text'' */
}
.input[type="submit"] {
/* styles all inputs with type ''submit'' */
}
También podría usar los combinadores hermanos (ya que las entradas de texto al estilo parecen seguir siempre un elemento de label , y el envío sigue un área de texto (pero esto es bastante frágil)):
label + input,
label + textarea {
/* styles input, and textarea, elements that follow a label */
}
input + input,
textarea + input {
/* would style the submit-button in the above HTML */
}
Simplemente, diseñe su botón Enviar como lo haría con cualquier otro elemento html. puede orientar los diferentes tipos de elementos de entrada utilizando el selector de atributos CSS
Como ejemplo podrías escribir
input[type=text] {
your style goes here.....
}
input[type=submit] {
your style goes here.....
}
textarea{
your style goes here.....
}
Aquí hay un Example trabajo
Yo sugeriría en lugar de usar
<input type=''submit''>
utilizar
<button type=''submit''>
El botón se introdujo específicamente teniendo en cuenta el estilo de CSS. Ahora puede agregarle la imagen de fondo de degradado o aplicarle un estilo con degradados de CSS3.
Obtenga más información sobre la estructura de formularios HTML5 aquí
http://www.w3.org/TR/2011/WD-html5-20110525/forms.html
¡Aclamaciones! .Pav
Aquí hay un punto de partida
CSS:
input[type=text] {
padding:5px;
border:2px solid #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
}
input[type=text]:focus {
border-color:#333;
}
input[type=submit] {
padding:5px 15px;
background:#ccc;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}