CSS로 입력 및 제출 버튼의 스타일을 지정하는 방법은 무엇입니까?

146

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>

여기에 이미지 설명을 입력하십시오

html css

— 사용자
소스

8

다른 요소의 스타일을 지정하는 것처럼 스타일을 지정할 수 있습니다.

— Explosion Pills

1

stackoverflow.com/questions/3540380/…

— gaynorvader 2016 년

6

중요한 점 은 다른 요소처럼 스타일을 지정할 수 없다는 것입니다. <input>태그는과 같은 것을 지원하지 않습니다 ::after.

— JamEngulfer

3

옳은. 그렇기 때문에을 사용하는 것이 바람직하다고 생각합니다 <button type="submit"><span>Send</span></button>. 그런 다음 사용할 수있는 ::after온 span-tag.

— kunambi

215

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

— 닉 R
소스

67

다른 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.....*/
}
....

다음은 작동하는 예입니다.

— 어제 일했다.
소스

25

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

— 자 이람
소스

17

대신 사용하는 것이 좋습니다

<input type='submit'>

사용하다

<button type='submit'>

CSS 스타일을 염두에두고 버튼이 도입되었습니다. 이제 그라데이션 배경 이미지를 이미지에 추가하거나 CSS3 그라데이션을 사용하여 스타일을 지정할 수 있습니다.

HTML5 양식 구조에 대한 자세한 내용은 여기를 참조하십시오.

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

건배! .Pav

— 포장
소스

1

이것은 iOS 용 Safari가 내 스타일을 버튼에 올바르게 적용하지만 <input type = "submit"> :)에는 적용하지 않기 때문에 매우 유용했습니다.

— CrushedPixel

그러나 버튼 태그 사이의 텍스트가 아닌 <button> TEXT </ button> 버튼 대신 텍스트로 값을 지정할 수 없습니다.

— Uzebeckatrente

4

안정성을 위해 클래스 이름 또는 id스타일을 지정할 요소 ( class텍스트 입력에는 이상적으로 a 가있을 것이므로)와 id제출 버튼 (a class도 작동 하지만 )을 제공하는 것이 좋습니다 .

<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 */
}

— 데이비드는 모니카 복직을 말한다
소스

4

양식 요소 UI는 브라우저 및 운영 체제에 의해 다소 제어되므로 모든 공통 브라우저 / OS 조합에서 동일하게 표시되는 방식으로 매우 안정적으로 스타일을 지정하는 것은 쉽지 않습니다.

대신 특정 항목이 필요한 경우 양식 가능한 양식 요소를 제공하는 라이브러리를 사용하는 것이 좋습니다. uniform.js 는 그러한 라이브러리 중 하나입니다.

— eis
소스

@BalinKingOfMoria는 그런 것 같습니다. 링크를 업데이트했습니다.

— eis

1

입력 유형을 스타일링 할 때 다음 코드를 사용하십시오.

   input[type=submit] {
    background-color: pink; //Example stlying
    }

— 야곱
소스

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

— 무 페어 웨 험프리
소스

이것은 완전히 끔찍하다

— Ratbert

1

여기에 주어진 답변을 기반 으로이 방법을 사용했습니다.

.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;
    }

— 다닐로 베네 가스
소스

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

— 카르티
소스

2

제출 입력처럼 이것을 사용하는 방법?

— user2307683

0

매우 간단합니다 :

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

이것은 내가 테스트 한 것입니다.

— 사이 카트 차크라보티
소스