Tạo Kiểu CSS cho Nút: Sử dụng <kiểu đầu vào = "nút> thay vì <button>

Tôi đang cố tạo kiểu cho nút bằng cách sử dụng <input type="button"> thay vì chỉ <button>. Với mã tôi có, nút mở rộng trên toàn màn hình . tôi chỉ muốn để có thể phù hợp với nó với văn bản mà nó ở nút Bất kỳ ý tưởngTạo Kiểu CSS cho Nút: Sử dụng <kiểu đầu vào = "nút> thay vì <button>

Xem jsFiddle Example hoặc tiếp tục sang HTML:.?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<title>WTF</title> 
</head> 
<style type="text/css"> 
.button { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
} 
.button:hover { 
    background-color:rgba(255,204,0,0.8); 
} 
</style> 
<body> 
<div class="button"> 
    <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)"> 
</div> 
</body>

Nguồn

2012-06-15 Varun Shetty

bạn cần để tạo kiểu đầu vào không phải là div xung quanh nó –

Trong mã .button CSS của bạn, hãy thử display:inline-block. Xem này JSFiddle

Nguồn

2012-06-15 15:23:08 huzzah

bạn có muốn một cái gì đó giống như được đưa ra fiddle!

HTML

<div class="button"> 
    <input type="button" value="TELL ME MORE" onClick="document.location.reload(true)"> 
</div>

CSS

.button input[type="button"] { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
    display:block; 
    width:100%; 
} 
.button input[type="button"]:hover { 
    background-color:rgba(255,204,0,0.8); 
}

Nguồn

2012-06-15 15:21:24 SVS

Float:left ... Mặc dù tôi đoán bạn muốn đầu vào để được theo kiểu không div?

.button input{ 
    color:#08233e;float:left; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    padding:14px; 
    background:url(overlay.png) repeat-x center #ffcc00; 
    background-color:rgba(255,204,0,1); 
    border:1px solid #ffcc00; 
    -moz-border-radius:10px; 
    -webkit-border-radius:10px; 
    border-radius:10px; 
    border-bottom:1px solid #9f9f9f; 
    -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5); 
    cursor:pointer; 
} 
.button input:hover{ 
    background-color:rgba(255,204,0,0.8); 
}

Nguồn

2012-06-15 15:21:53

Vấn đề không phải với nút, vấn đề là với div. Vì div s là các phần tử khối, chúng mặc định chiếm toàn bộ chiều rộng của phần tử cha mẹ của chúng (như một quy luật chung). để chiếm toàn bộ chiều rộng của phần tử cao hơn trong cấu trúc phân cấp).

Dù sao, hãy thử thêm float: left; vào quy tắc cho bộ chọn .button. Điều đó sẽ gây ra các div với lớp button để phù hợp với xung quanh nút, và sẽ cho phép bạn có nhiều nổi div s trên cùng một dòng nếu bạn muốn nhiều hơn div.button s.

Nguồn

2012-06-15 15:21:59 JAB

Hãy thử đặt

Display:inline;

Trong CSS.

Nguồn

2012-06-15 15:22:04 Charlie

Bạn có thực sự muốn tạo kiểu <div> không? Hay bạn muốn tạo kiểu cho <input type="button">? Bạn nên sử dụng bộ chọn chính xác nếu bạn muốn sau này:

input[type=button] { 
    color:#08233e; 
    font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif; 
    font-size:70%; 
    /* ... other rules ... */ 
    cursor:pointer; 
} 

input[type=button]:hover { 
    background-color:rgba(255,204,0,0.8); 
}

Xem thêm:

Nguồn

2012-06-15 15:24:11 Zeta

Tạo Kiểu CSS cho Nút: Sử dụng <kiểu đầu vào = "nút> thay vì <button>

Trả lời

Các vấn đề liên quan