Làm cách nào để thay đổi màu của thông báo lỗi trong khung sọc

Question

Tôi đang cố thay đổi màu của thông báo lỗi. Tôi đang sử dụng xác nhận Stripes. Nếu xác thực không thành công, tôi sẽ gửi một thông báo lỗi. Tôi muốn nó trong màu đỏ. Nhưng nó cho thấy màu đen. Làm thế nào tôi có thể thay đổi màu sắc của thông báo lỗi trong khung Stripes.

Sau đây là những gì tôi đã thử.

 <div class="item"> 

      <stripes:errors /> 
      <stripes:form name="home"action="/home.action"> 
       //contents 
       </stripes:form> 
     </div> 

Answer 1

Sử dụng bộ chọn để chỉ định các lớp lỗi. Điều này áp dụng kiểu lỗi toàn cục cho trường nhập,

input.error, textarea.error { 
    color: red; 
    background-color: yellow; 
} 

input.error[type="radio"], input.error[type="checkbox"], select.error { 
    background-color: white; 
    border: 2px solid red; 
} 

Đọc Stripes Manual để biết thêm thông tin.

Answer 2

Vì Vinoth cho biết bạn có thể áp dụng các lớp CSS để thay đổi giao diện của thông báo lỗi. Ngoài ra, các thư Stripes có thể được tùy chỉnh hoàn toàn bằng cách chỉnh sửa StripesResources.properties.

Tại đây bạn có thể xác định chính xác thư của bạn sẽ trông như thế nào, sử dụng các lớp đánh dấu và CSS hoặc thậm chí là kiểu nội tuyến.

# Resource strings used by the <stripes:errors> tag when there are no nested tags 
stripes.errors.header=<div class="my-error-wrapper"><h4>Ooops... some things went awfully awry:/h4><ol> 
stripes.errors.beforeError=<li><i class="fa fa-warning"></i>&nbsp; 
stripes.errors.afterError=</li> 
stripes.errors.footer=</ol></div> 

# Resource strings used by the <stripes:errors> tag when displaying errors for a 
# specific field (e.g. <stripes:errors field="password"/>). If not supplied the 
# values above will be used instead. 
stripes.fieldErrors.header= 
stripes.fieldErrors.beforeError=<span class="my-error-inline"><i class="fa fa-warning"></i>&nbsp; 
stripes.fieldErrors.afterError=</span> 
stripes.fieldErrors.footer= 

# Resource strings used by the stripes:messages tag 
stripes.messages.header=<div class="my-message-wrapper"><ul> 
stripes.messages.beforeMessage=<li> 
stripes.messages.afterMessage=</li> 
stripes.messages.footer=</ul></div> 

Như bạn thấy, bạn có thể bổ sung thêm thứ ưa thích như FontAwesome biểu tượng (thừa nhận, điều này đi xa hơn một chút so với OP yêu cầu).