164

CSSを学んでいます。CSSで入力ボタンと送信ボタンをスタイルする方法は?

このようなものを作成しようとしていますが、どうすればよいかわかりません

<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>

ここに画像の説明を入力

4

12 に答える 12

236

http://jsfiddle.net/vfUvZ/

ここが出発点です

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; 
}
于 2013-06-11T10:50:43.033 に答える
75

他の html 要素のスタイルを設定するのと同じように、送信ボタンのスタイルを設定するだけです。CSS属性セレクターを使用して、さまざまなタイプの入力要素をターゲットにすることができます

例として、あなたが書くことができる 

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

他のセレクターと組み合わせる

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

これが実際の例です

于 2013-06-11T10:48:12.903 に答える
26

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; 
}
于 2013-06-11T10:46:40.863 に答える
4

フォーム要素の UI は、ブラウザーとオペレーティング システムによってある程度制御されるため、すべての一般的なブラウザーと OS の組み合わせで同じように見えるように、非常に確実にスタイルを設定することは簡単ではありません。

代わりに、特定のものが必要な場合は、スタイル設定可能なフォーム要素を提供するライブラリを使用することをお勧めします。uniform.jsはそのようなライブラリの 1 つです。

于 2013-06-11T10:47:32.133 に答える
4

信頼性のために、スタイルを設定する要素にクラス名またはids を付けることをお勧めします (理想的にはclass、いくつかあるため、テキスト入力には a) とid、送信ボタンには (aclassも機能しますが)。

<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>

CSS の場合:

.textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

より最新のブラウザーの場合、属性で選択できます (同じ HTML を使用):

.input {
    /* styles all input elements */
}

.input[type="text"] {
     /* styles all inputs with type 'text' */
}

.input[type="submit"] {
     /* styles all inputs with type 'submit' */
}

兄弟コンビネータを使用することもできます (スタイルへのテキスト入力は常にlabel要素に従い、送信はテキストエリアに従うように見えるため (ただし、これはかなり脆弱です)):

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 */
}
于 2013-06-11T10:50:29.487 に答える
1

実はこれも大活躍。

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;
             }
于 2015-10-20T12:02:40.250 に答える
1

<input type="submit" style="background: red;" value="PRIVATE">

CSS ハイジャックでヒットする最後の場所。醜いが安全。最速で変更が難しい。はい。

于 2021-02-28T07:09:01.140 に答える
0

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 スタイリング

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;
}
于 2013-06-11T10:59:14.983 に答える