Ik leer CSS. Hoe de invoer in te stellen en knop in te dienen met CSS?
Ik probeer iets dergelijks te creëren, maar ik heb geen idee hoe ik
<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>
Antwoord 1, Autoriteit 100%
Hier is een uitgangspunt
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;
}
Antwoord 2, Autoriteit 31%
Stijl eenvoudigweg uw verzendknop zoals u een ander HTML-element wilt stylen. U kunt het andere type invoerelementen targeten met CSS-kenmerkkiezer
Als een voorbeeld zou u
kunnen schrijven
input[type=text] {
/*your styles here.....*/
}
input[type=submit] {
/*your styles here.....*/
}
textarea{
/*your styles here.....*/
}
Combineer met andere selectors
input[type=text]:hover {
/*your styles here.....*/
}
input[type=submit] > p {
/*your styles here.....*/
}
....
Hier is een werkend Voorbeeld
Antwoord 3, autoriteit 11%
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;
}
Antwoord 4, autoriteit 8%
Ik zou willen voorstellen in plaats van
<input type='submit'>
gebruik
<button type='submit'>
Knop is speciaal geïntroduceerd met het oog op de CSS-stijl. U kunt er nu de achtergrondafbeelding met kleurovergang aan toevoegen of deze opmaken met CSS3-verlopen.
Lees hier meer over de structuur van HTML5-formulieren
http://www.w3.org/TR/2011/WD-html5-20110525/forms.html
Proost!
.Pav
Antwoord 5, autoriteit 2%
Voor de betrouwbaarheid raad ik aan om klassenamen, of ids, aan de te stylen elementen te geven (idealiter een classvoor de tekstinvoer, aangezien er vermoedelijk meerdere zijn) en een idvoor de verzendknop (hoewel een classook zou werken):
<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>
Met de CSS:
.textInput {
/* styles the text input elements with this class */
}
#submitBtn {
/* styles the submit button */
}
Voor meer up-to-date browsers kunt u op attributen selecteren (met dezelfde HTML):
.input {
/* styles all input elements */
}
.input[type="text"] {
/* styles all inputs with type 'text' */
}
.input[type="submit"] {
/* styles all inputs with type 'submit' */
}
Je zou ook gewoon broer/zus combinators kunnen gebruiken (aangezien de tekstinvoer voor stijl altijd een labelelement lijkt te volgen, en de inzending volgt een tekstgebied (maar dit is nogal kwetsbaar)):
p>
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 */
}
Antwoord 6, autoriteit 2%
UI van formulierelementen wordt enigszins gecontroleerd door browser en besturingssysteem, dus het is niet triviaal om ze zo betrouwbaar te stylen dat het er hetzelfde uitziet in alle gebruikelijke browser/OS-combinaties.
Als je iets specifieks wilt, raad ik je aan om een bibliotheek te gebruiken die je stijlbare vormelementen biedt. uniform.jsis zo’n bibliotheek.
Antwoord 7
Ik heb het op deze manier gedaan op basis van de antwoorden die hier zijn gegeven, ik hoop dat het helpt
.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;
}
Antwoord 8
Als u een invoertype wilt stylen, gebruikt u de volgende code.
input[type=submit] {
background-color: pink; //Example stlying
}
Antwoord 9
Eigenlijk werkt dit ook geweldig.
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;
}
Antwoord 10
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>
CSS-styling
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;
}
Antwoord 11
Zeer eenvoudig:
<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>
Dit werkt ik heb getest.
Antwoord 12
<input type="submit" style="background: red;" value="PRIVATE">
Laatste plaats om te worden geraakt in een CSS Hi-Jack. Lelijk maar veilig. Snel en moeilijk te veranderen. Ja.