Thay đổi giá trị của đầu vào văn bản bằng css?

Question

Có cách nào để thay đổi giá trị của một văn bản đầu vào (văn bản mặc định hiển thị) bằng css không?

Im tối ưu hóa trang web cho thiết bị di động và tôi muốn văn bản 'tìm kiếm trang web này' được rút ngắn thành 'tìm kiếm'. Cảm ơn

Answer 1

Đó thực sự không phải là CSS.

CSS là để tạo kiểu cho nội dung của bạn; HTML là dành cho chính nội dung thực.

Nếu bạn cần sửa đổi nội dung sau khi HTML đã tải, thì đó là những gì Javascript được sử dụng.

Vì vậy, câu trả lời thực sự cho câu hỏi của bạn là: sửa đổi HTML trực tiếp hoặc sử dụng Javascript.

Có một số điều bạn có thể làm với CSS mà ảnh hưởng đến nội dung, chẳng hạn như thêm văn bản bổ sung trong trước hoặc đằng sau một yếu tố sử dụng :before và :after pseudo-selectors, nhưng điều đó sẽ không giúp bạn trong việc trường hợp này và không nên được sử dụng cho loại công việc thay đổi nội dung mà bạn đang nói đến.

Nhân tiện, hơi ngoài chủ đề, nhưng nếu bạn đang sử dụng giá trị trường nhập dưới dạng văn bản nhắc, bạn có thể xem xét xem xét thuộc tính HTML5 placeholder thay thế. Điều này cũng không giải quyết được câu hỏi của bạn, nhưng có vẻ như đó có thể là thứ có thể hữu ích cho bạn.

Answer 2

Không, CSS không thể thay đổi thuộc tính value của input hoặc thực sự bất kỳ thuộc tính nào của bất kỳ phần tử nào.

Answer 3

Nếu bạn muốn thay đổi giá trị, hãy sử dụng thuộc tính "giá trị" HTML;

dụ:

<input type="submit" value="ENVIAR"> 

rằng sẽ thay đổi mặc định "submit" value để "enviar"

Answer 4

muộn để đảng nhưng sử dụng "nội dung" thuộc tính, trong vòng element:before sẽ thực hiện những gì bạn cần là thấy trong http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string

Tôi có thể thao tác một giá trị nội dung nút qua jQuery toggleClass, chuyển đổi giữa các lớp sau:

.open_button:before{ 
    content:"open"; 
} 
.close_button:before{ 
    content: "close"; 
} 

Tôi hiểu được những điều tốt đẹp, nhưng tôi cảm thấy như toggleClass mang đến sự thanh lịch để biện minh cho thủ thuật CSS. Nếu không, người ta sẽ sử dụng một chức năng chuyển đổi với các chức năng chuyển đổi css lồng nhau. Cá nhân tôi nghĩ rằng tránh các chức năng jQuery lồng nhau là tốt hơn tìm kiếm.

Answer 5

Đối với tôi, giải pháp là

<button type="submit" class="mybutton" name="add"> 
    <span class="add">Add new</span> 
</button> 

do đó css sẽ là:

.mybutton:hover .add:after{content="0"} 

Answer 6

dễ dàng như vậy, chỉ cần gõ vào ví dụ:

button { 
 
color: red; 
 
font-family: sans-serif; 
 
}

có bạn đang có, các nút thực hiện tất cả các đầu vào với giá trị với ví dụ nộp/reset/Vv ..

Answer 7

Giải pháp này là một chút khôn lanh,

nhưng nó luôn luôn làm việc cho tôi.

/*CSS Code*/ 
 

 
@media screen and (max-width: 768px) { 
 
.showondesktop { 
 
display: none !important; } 
 
} 
 

 
#showonmobile { 
 
    display:none; 
 
} 
 
@media screen and (max-width: 767px) { 
 
    #showonmobile { 
 
display:block; } 
 
}

<!--HTML Code-> 
 

 
<div class="showondesktop"> search this site </div> 
 

 
<div id="showonmobile"> search </div>

Khi trang web được truy cập từ di động nó sẽ được hiển thị "tìm kiếm", nhưng khi truy cập từ máy tính để bàn sẽ được hiển thị "tìm kiếm trang web này".

Hình ảnh Xem trước:

Output-Desktop-view.jpg

Output-Mobile-view.jpg