Tôi có thể sử dụng phần tử: trước hoặc: sau phần tử giả trên trường nhập không?

Tôi đang cố gắng sử dụng :afterphần tử giả CSS trên một inputtrường, nhưng nó không hoạt động. Nếu tôi sử dụng nó với a span, nó hoạt động tốt.

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

Điều này hoạt động (đặt nụ cười sau "buu!" Và trước "một số nữa")

<span class="mystyle">buuu!</span>a some more

Điều này không hoạt động - nó chỉ tô màu một số giá trị màu đỏ, nhưng không có nụ cười.

<input class="mystyle" type="text" value="someValue">

Tôi đang làm gì sai? Tôi có nên sử dụng một bộ chọn giả khác?

Lưu ý: Tôi không thể thêm spanxung quanh mình input, vì nó được tạo bởi kiểm soát của bên thứ ba.

:aftervà :beforekhông được hỗ trợ trong Internet Explorer 7 trở xuống, trên bất kỳ yếu tố nào.

Nó cũng không có nghĩa là được sử dụng trên các yếu tố thay thế, chẳng hạn như yếu tố hình thức (đầu vào) và yếu tố hình ảnh .

Nói cách khác, điều đó là không thể với CSS thuần túy.

Tuy nhiên nếu sử dụng jquery bạn có thể sử dụng

$(".mystyle").after("add your smiley here");

Tài liệu API trên .after

Để nối thêm nội dung của bạn với javascript. Điều này sẽ hoạt động trên tất cả các trình duyệt.

:before và :after kết xuất bên trong một container

và <input> không thể chứa các yếu tố khác.

Các phần tử giả chỉ có thể được xác định (hoặc nói tốt hơn là chỉ được hỗ trợ) trên các phần tử container. Bởi vì cách chúng được hiển thị nằm trong chính vùng chứa như là một phần tử con. inputkhông thể chứa các yếu tố khác do đó chúng không được hỗ trợ. Mộtbutton mặt khác đó cũng là một yếu tố hình thức hỗ trợ cho họ, bởi vì đó là một container của sub-yếu tố khác.

Nếu bạn hỏi tôi, nếu một số trình duyệt không hiển thị hai giả yếu tố trên yếu tố phi container, đó là một lỗi và một sự phù hợp không chuẩn. Đặc điểm kỹ thuật nói trực tiếp về nội dung phần tử ...

Đặc điểm kỹ thuật của W3C

Nếu chúng ta đọc kỹ kỹ đặc tả thì nó thực sự nói rằng chúng được chèn vào bên trong một phần tử có chứa:

Tác giả chỉ định kiểu và vị trí của nội dung được tạo bằng: trước và sau phần tử giả. Như tên của chúng chỉ ra, các phần tử giả: trước và sau chỉ định vị trí của nội dung trước và sau nội dung của cây tài liệu. Thuộc tính 'nội dung', kết hợp với các phần tử giả này, chỉ định nội dung được chèn.

Xem? nội dung cây tài liệu của một phần tử . Theo tôi hiểu điều này có nghĩa là trong một container.

Điều kỳ lạ là nó hoạt động với một số loại đầu vào. Ít nhất là trong Chrome,

<input type="checkbox" />

hoạt động tốt, giống như

<input type="radio" />

Nó chỉ type=textvà một số người khác không hoạt động.

Đây là một cách tiếp cận khác (giả sử bạn có quyền kiểm soát HTML): thêm một khoảng trống <span></span>ngay sau đầu vào và nhắm mục tiêu trong CSS bằng cách sử dụnginput.mystyle + span:after

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

Tôi đang sử dụng phương pháp này trong AngularJS bởi vì nó sẽ .ng-invalidtự động thêm các lớp để <input>tạo thành các phần tử và cho biểu mẫu, nhưng không phải cho <label>.

:beforevà :afterđược áp dụng bên trong một thùng chứa, có nghĩa là bạn có thể sử dụng nó cho các phần tử có thẻ kết thúc.

Nó không áp dụng cho các yếu tố tự đóng.

Mặt khác, các yếu tố tự đóng (chẳng hạn như img / giờ / đầu vào) cũng được gọi là Elements Các thành phần thay thế ', vì chúng được thay thế bằng nội dung tương ứng. "Đối tượng bên ngoài" cho việc thiếu một thuật ngữ tốt hơn. Đọc tốt hơn ở đây

Tôi đã sử dụng background-imageđể tạo dấu chấm màu đỏ cho các trường bắt buộc.

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

Xem trên Codepen

Bạn không thể đặt phần tử giả trong phần tử đầu vào, nhưng có thể đặt phần tử bóng, như phần giữ chỗ!

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

Để làm cho nó làm việc trong các trình duyệt khác, sử dụng :-moz-placeholder, ::-moz-placeholdervà :-ms-input-placeholder trong bộ chọn khác nhau . Không thể nhóm các bộ chọn, bởi vì nếu trình duyệt không nhận ra bộ chọn sẽ làm mất hiệu lực toàn bộ câu lệnh.

CẬP NHẬT : Đoạn mã trên chỉ hoạt động với bộ xử lý trước CSS (SASS, LESS ...), mà không sử dụng bộ xử lý trước:

input[type="text"]::-webkit-input-placeholder:before { // your code }

Các phần tử giả như :after, :beforechỉ dành cho các phần tử container. Các phần tử bắt đầu và đóng ở một nơi như <input/>, <img>v.v. không phải là phần tử chứa và do đó các phần tử giả không được hỗ trợ. Khi bạn áp dụng một phần tử giả cho phần tử container như <div>và nếu bạn kiểm tra mã (xem hình ảnh), bạn có thể hiểu ý của tôi. Trên thực tế phần tử giả được tạo bên trong phần tử container. Điều này là không thể trong trường hợp <input>hoặc<img>

Một giải pháp hoạt động trong CSS thuần:

Bí quyết là giả sử có một phần tử dom sau trường văn bản.

/*
 * The trick is here:
 * this selector says "take the first dom element after
 * the input text (+) and set its before content to the
 * value (:before).
 */
input#myTextField + *:before {
  content: "👍";
} 

<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
  There's maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) Giải pháp hạn chế, mặc dù:

• bạn phải hy vọng rằng có một yếu tố dom sau,
• bạn phải hy vọng không có trường đầu vào nào khác theo trường đầu vào của bạn.

Nhưng trong hầu hết các trường hợp, chúng tôi biết mã của mình nên giải pháp này có vẻ hiệu quả và 100% CSS và 0% jQuery.

Tôi tìm thấy bài đăng này vì tôi đang có cùng một vấn đề, đây là giải pháp hiệu quả với tôi. Trái với việc thay thế giá trị của đầu vào, chỉ cần loại bỏ nó và hoàn toàn định vị một khoảng phía sau nó có cùng kích thước, khoảng đó có thể có một :beforelớp giả được áp dụng cho nó với phông chữ biểu tượng bạn chọn.

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

Sự hiểu lầm lớn nhất ở đây là ý nghĩa của các từ beforevà after. Họ không đề cập đến chính yếu tố đó, mà đề cập đến nội dung trong thành phần đó. Vì vậy, element:beforetrước nội dung, và element:aftersau nội dung, nhưng cả hai vẫn ở bên trong yếu tố ban đầu.

Phần inputtử không có nội dung trong chế độ xem CSS và do đó không có :beforehoặc có :afternội dung giả. Điều này đúng với nhiều yếu tố khoảng trống hoặc thay thế khác.

Không có phần tử giả đề cập đến bên ngoài phần tử.

Trong một vũ trụ khác, những yếu tố giả này có thể đã được gọi là thứ khác để làm cho sự khác biệt này rõ ràng hơn. Và ai đó thậm chí có thể đã đề xuất một yếu tố giả thực sự nằm ngoài yếu tố đó. Cho đến nay, đây không phải là trường hợp trong vũ trụ này.

Theo một ghi chú trong thông số CSS 2.1, thông số kỹ thuật này không xác định đầy đủ sự tương tác của: trước và: sau với các yếu tố được thay thế (chẳng hạn như IMG trong HTML). Điều này sẽ được xác định chi tiết hơn trong một đặc điểm kỹ thuật trong tương lai. Mặc dù inputkhông thực sự là một yếu tố thay thế nữa, nhưng tình huống cơ bản đã không thay đổi: ảnh hưởng của :beforevà :afterđối với nó trong không xác định và thường không có tác dụng.

Giải pháp là tìm một cách tiếp cận khác cho vấn đề bạn đang cố gắng giải quyết theo cách này. Đưa nội dung được tạo vào điều khiển nhập văn bản sẽ rất sai lệch: đối với người dùng, nó dường như là một phần của giá trị ban đầu trong điều khiển, nhưng nó không thể được sửa đổi - vì vậy nó dường như là một thứ bắt buộc khi bắt đầu kiểm soát, nhưng nó sẽ không được gửi như một phần của dữ liệu biểu mẫu.

Như những người khác đã giải thích, inputs là các phần tử void được thay thế, vì vậy hầu hết các trình duyệt sẽ không cho phép bạn tạo các phần tử giả ::beforecũng như ::aftergiả.

Tuy nhiên, Nhóm làm việc CSS đang xem xét cho phép rõ ràng ::beforevà ::aftertrong trường hợp inputcó appearance: none.

Từ https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,

Cả Safari và Chrome đều cho phép các phần tử giả trên đầu vào biểu mẫu của chúng. Các trình duyệt khác thì không. Chúng tôi đã xem xét loại bỏ điều này, nhưng bộ đếm sử dụng đang ghi ~ 0,07% số trang sử dụng nó, gấp 20 lần ngưỡng loại bỏ tối đa của chúng tôi.

Trên thực tế, việc chỉ định các phần tử giả trên các đầu vào sẽ yêu cầu chỉ định cấu trúc bên trong của các đầu vào ít nhất là phần nào, điều mà chúng ta chưa quản lý được (và tôi không tin rằng chúng ta * có thể * làm được). Nhưng Boris đề nghị, trong một trong những lỗi, cho phép nó xuất hiện: không có đầu vào nào - về cơ bản chỉ biến chúng thành các phần tử <div>, thay vì các yếu tố "thay thế".

thử tiếp theo:

label[for="userName"] {
  position: relative;
}

label[for="userName"]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
  right: -30px;
}

<label for="userName">
	Name: 
	<input type="text" name="userName" id="userName">
	</label>

Bạn phải có một số loại trình bao bọc xung quanh đầu vào để sử dụng phần tử giả trước hoặc sau. Đây là một câu đố có trước trên div trình bao bọc của một đầu vào và sau đó đặt trước vào bên trong đầu vào - hoặc ít nhất là nó trông giống như nó. Rõ ràng, đây là một công việc xung quanh nhưng hiệu quả trong một nhúm và cho vay để được đáp ứng. Bạn có thể dễ dàng thực hiện điều này sau nếu bạn cần đặt một số nội dung khác.

Fiddle làm việc

Ký hiệu đô la bên trong đầu vào dưới dạng phần tử giả: http://jsfiddle.net/kapunahele/ose4r8uj/1/

HTML:

<div class="test">
    <input type="text"></input>
</div>

CSS:

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

Nếu bạn đang cố gắng tạo kiểu cho một phần tử đầu vào bằng: trước và: sau, tỷ lệ cược là bạn đang cố gắng bắt chước các hiệu ứng của nhịp, div hoặc thậm chí là một phần tử trong ngăn xếp CSS của bạn.

Như câu trả lời của Robert Koritnik chỉ ra ,: trước và sau chỉ có thể được áp dụng cho các phần tử container và phần tử đầu vào không phải là vùng chứa.

TUY NHIÊN, HTML 5 đã giới thiệu phần tử nút là một thùng chứa và hoạt động giống như một phần tử [type = "submit | reset"].

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

Tóm lược

Nó không hoạt động với <input type="button">, nhưng nó hoạt động tốt với <input type="checkbox">.

Câu đố : http://jsfiddle.net/gb2wY/50/

HTML :

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

CSS :

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

:beforevà :afterchỉ hoạt động cho các nút có thể có các nút con vì chúng chèn một nút mới làm nút đầu tiên hoặc nút cuối cùng.

Tôi thấy rằng bạn có thể làm điều đó như thế này:

.submit .btn input
{
   padding:11px 28px 12px 14px;
   background:#004990;
   border:none;
    color:#fff;
}

 .submit .btn
 {
     border:none;
     color:#fff;
     font-family: 'Open Sans', sans-serif;
     font-size:1em;
     min-width:96px;
     display:inline-block;
     position:relative;
 }

.submit .btn:after
{
    content:">";
    width:6px;
    height:17px;
    position:absolute;
    right:36px;
    color:#fff;
    top:7px;
}

<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

Bạn cần phải có cha mẹ div lấy phần đệm và: sau. Cha mẹ đầu tiên cần phải tương đối và div thứ hai phải tuyệt đối để bạn có thể đặt vị trí của sau.

Tôi có một ý tưởng khác sử dụng điều này thay thế:

<div>
<input type="text"></input>text can be entered here</div>