Saya mencoba menggunakan :after
elemen pseudo-CSS pada suatu input
bidang, tetapi tidak berhasil. Jika saya menggunakannya dengan span
, itu berfungsi OK.
<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>
Ini bekerja (menempatkan smiley setelah "buu!" Dan sebelum "lagi")
<span class="mystyle">buuu!</span>a some more
Ini tidak berfungsi - itu hanya warna someValue dalam merah, tetapi tidak ada smiley.
<input class="mystyle" type="text" value="someValue">
Apa yang saya lakukan salah? saya harus menggunakan pseudo-selector lain?
Catatan: Saya tidak bisa menambahkan span
sekitar saya input
, karena sedang dibuat oleh kontrol pihak ketiga.
html
css
pseudo-element
css-content
matra
sumber
sumber
border-color
dariinput
sebaliknya. Saya merasa lebih menarik perhatian.Jawaban:
:after
dan:before
tidak didukung di Internet Explorer 7 dan di bawahnya, pada elemen apa pun.Ini juga tidak dimaksudkan untuk digunakan pada elemen yang diganti seperti elemen bentuk (input) dan elemen gambar .
Dengan kata lain itu tidak mungkin dengan CSS murni.
Namun jika menggunakan jquery Anda bisa menggunakan
API docs pada .after
Untuk menambahkan konten Anda dengan javascript. Ini akan bekerja di semua browser.
sumber
:after
secara umum, meskipun tidak mendukung input:before
atau tidak:after
.:after
dan:before
pseudo, mereka hanya bisa memakai elemen kontainer. Mengapa? Karena mereka ditambahkan di dalam elemen tertentu.input
bukan wadah.button
misalnya karena itu Anda dapat memakainya. Bekerja seperti yang diharapkan. Spesifikasi sebenarnya mengatakan: sebelum dan sesudah isi pohon dokumen elemen Secara eksplisit mengatakan CONTENT . Jadi elemen harus menjadi wadah.:before
dan:after
render di dalam sebuah wadahdan <input> tidak dapat mengandung elemen lain.
Elemen semu hanya dapat didefinisikan (atau lebih baik dikatakan hanya didukung) pada elemen kontainer. Karena cara mereka diberikan ada di dalam wadah itu sendiri sebagai elemen anak.
input
tidak dapat mengandung elemen lain karena itu mereka tidak didukung. Abutton
di sisi lain yang juga merupakan elemen bentuk mendukung mereka, karena itu adalah wadah sub-elemen lainnya.Jika Anda bertanya kepada saya, jika beberapa browser yang tidak menampilkan dua pseudo-elemen ini pada elemen non-kontainer, itu bug dan kesesuaian non-standar. Spesifikasi langsung berbicara tentang konten elemen ...
Spesifikasi W3C
Jika kita hati-hati membaca spesifikasi itu sebenarnya mengatakan bahwa mereka dimasukkan ke dalam elemen yang mengandung:
Lihat? konten hierarki dokumen elemen . Seperti yang saya pahami, ini berarti di dalam sebuah wadah.
sumber
[required]::before { content "*"; color: red; }
: P<input type="submit" value="Send"/>
, gunakan<button type="submit">Send</button>
saja. Presentasi identik tetapi<button>
wadah dan dengan demikian mendukung:before
dan:after
.<hr />
? Saya pikir itu bukan elemen wadah, tetapi bisa membuat:after
dan:before
jsfiddle.net/Uf88j/1p
danh1
, konten ada di dalam tag, jadi sebelum / sesudah muncul di dalamnya juga. Dengan elemen sepertiinput
danhr
,: sebelum dan: setelah akan tetap muncul sebelum atau setelah konten, tetapi tidak ada wadah yang terlibat (terutama untukinput
). input: dicentang: sebelumnya banyak digunakan untuk menunjukkan kotak centang sedang diperiksa melalui css.Anehnya, ia bekerja dengan beberapa jenis input. Paling tidak di Chrome,
berfungsi dengan baik, sama seperti
Hanya saja
type=text
dan sebagian lainnya tidak berfungsi.sumber
Berikut ini pendekatan lain (dengan asumsi Anda memiliki kendali atas HTML): tambahkan
<span></span>
hak kosong setelah input, dan targetkan itu menggunakan CSSinput.mystyle + span:after
Saya menggunakan pendekatan ini di AngularJS karena akan menambahkan
.ng-invalid
kelas secara otomatis untuk<input>
membentuk elemen, dan ke formulir, tetapi tidak ke<label>
.sumber
input:hover+span:after{color: blue}
. Suara positif.:before
dan:after
diterapkan di dalam wadah, yang berarti Anda dapat menggunakannya untuk elemen dengan tag akhir.Di samping catatan, elemen yang menutup sendiri (seperti img / jam / input) juga dikenal sebagai 'Elemen Diganti', karena mereka diganti dengan konten masing-masing. "Objek Eksternal" karena kurangnya istilah yang lebih baik. Lebih baik baca di sini
sumber
Saya menggunakan
background-image
untuk membuat titik merah untuk bidang yang diperlukan.Lihat di Codepen
sumber
Anda tidak bisa memasukkan elemen pseudo di elemen input, tetapi bisa memasukkan elemen shadow, seperti placeholder!
Untuk membuatnya bekerja di browser lain, gunakan
:-moz-placeholder
,::-moz-placeholder
dan:-ms-input-placeholder
di pemilih yang berbeda . Tidak dapat mengelompokkan pemilih, karena jika browser tidak mengenali pemilih akan membatalkan seluruh pernyataan.UPDATE : Kode di atas hanya berfungsi dengan pra-prosesor CSS (SASS, KURANG ...), tanpa menggunakan pra-prosesor:
sumber
glyphicon-search
markup tanpa menyentuh.Elemen pseudo seperti
:after
,:before
hanya untuk elemen kontainer. Elemen-elemen yang memulai dan menutup di satu tempat seperti<input/>
,<img>
dll , bukanlah elemen kontainer dan karenanya elemen pseudo tidak didukung. Setelah Anda menerapkan elemen pseudo ke elemen wadah seperti<div>
dan jika Anda memeriksa kode (lihat gambar), Anda dapat memahami apa yang saya maksud. Sebenarnya elemen pseudo dibuat di dalam elemen kontainer. Ini tidak mungkin dalam kasus<input>
atau<img>
sumber
Solusi yang berfungsi dalam CSS murni:
Caranya adalah dengan mengira ada elemen dom setelah bidang teks.
(*) Solusi terbatas, meskipun:
Tetapi dalam kebanyakan kasus, kita tahu kode kita sehingga solusi ini tampak efisien dan 100% CSS dan 0% jQuery.
sumber
input#myTextField ~ span:before {
jauh lebih baik, tetapi rentang harus memiliki kelas yang benar-benar lebih eksplisit seperti.tick
atau.icon
Saya menemukan posting ini karena saya mengalami masalah yang sama, ini adalah solusi yang bekerja untuk saya. Berbeda dengan mengganti nilai input, hapus saja dan posisikan rentang di belakangnya dengan ukuran yang sama, rentang tersebut dapat memiliki
:before
kelas pseudo yang diterapkan dengan font font pilihan Anda.sumber
Kesalahpahaman terbesar di sini adalah makna kata-kata
before
danafter
. Mereka tidak merujuk ke elemen itu sendiri, tetapi ke konten di dalam elemen. Begituelement:before
juga sebelum konten, danelement:after
setelah konten, tetapi keduanya masih di dalam elemen asli.The
input
elemen memiliki konten dalam tampilan CSS, dan sehingga tidak memiliki:before
atau:after
konten semu. Hal ini berlaku untuk banyak elemen yang dibatalkan atau diganti.Tidak ada elemen pseudo yang merujuk ke luar elemen.
Di alam semesta yang berbeda, elemen pseudo ini mungkin disebut sesuatu yang lain untuk membuat perbedaan ini lebih jelas. Dan seseorang bahkan mungkin telah mengusulkan elemen palsu yang benar-benar di luar elemen tersebut. Sejauh ini, ini bukan kasus di alam semesta ini.
sumber
hr
selalu ambigu dari sudut pandang CSS, meskipun Anda melihat lebih banyak dalam membahas warna.Menurut catatan dalam spesifikasi CSS 2.1, spesifikasi “tidak sepenuhnya menentukan interaksi antara: sebelum dan: setelah dengan elemen yang diganti (seperti IMG dalam HTML). Ini akan didefinisikan secara lebih rinci dalam spesifikasi masa depan. " Meskipun
input
sebenarnya bukan elemen yang diganti lagi, situasi dasar tidak berubah: efek dari:before
dan:after
di atasnya tidak ditentukan dan umumnya tidak memiliki efek.Solusinya adalah menemukan pendekatan yang berbeda untuk masalah yang Anda coba atasi dengan cara ini. Menempatkan konten yang dihasilkan ke dalam kontrol input teks akan sangat menyesatkan: bagi pengguna, itu akan tampak sebagai bagian dari nilai awal dalam kontrol, tetapi tidak dapat dimodifikasi - sehingga akan tampak seperti sesuatu yang dipaksakan pada awal kontrol, tetapi belum akan dikirim sebagai bagian dari data formulir.
sumber
input
elemen, hanya tidak ditentukan dan tergantung pada browser.Seperti yang dijelaskan orang lain,
input
s adalah elemen kosong yang diganti, sehingga sebagian besar browser tidak akan mengizinkan Anda untuk membuat::before
atau::after
memalsukan elemen di dalamnya.Namun, Kelompok Kerja CSS sedang mempertimbangkan untuk secara eksplisit mengizinkan
::before
dan::after
jikainput
adaappearance: none
.Dari https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,
sumber
coba selanjutnya:
sumber
Anda harus memiliki semacam pembungkus di sekitar input untuk menggunakan elemen pseudo sebelum atau sesudah. Berikut biola yang memiliki sebelum pada pembungkus div dari input dan kemudian menempatkan sebelum di dalam input - atau setidaknya sepertinya itu. Jelas, ini adalah pekerjaan tetapi efektif dalam keadaan darurat dan cocok untuk menjadi responsif. Anda dapat dengan mudah membuat ini setelah Anda perlu menaruh beberapa konten lainnya.
Biola yang Bekerja
Dolar masuk ke dalam input sebagai elemen pseudo: http://jsfiddle.net/kapunahele/ose4r8uj/1/
HTML:
CSS:
sumber
Jika Anda mencoba mendesain elemen input dengan: sebelum dan: setelah, kemungkinan Anda mencoba untuk meniru efek span, div, atau bahkan elemen lain di stack CSS Anda.
Seperti yang ditunjukkan oleh jawaban Robert Koritnik,: sebelum dan: sesudah hanya dapat diterapkan pada elemen wadah dan elemen input bukan wadah.
NAMUN, HTML 5 memperkenalkan elemen tombol yang merupakan wadah dan berperilaku seperti elemen input [type = "submit | reset"].
sumber
Ringkasan
Itu tidak bekerja dengan
<input type="button">
, tetapi bekerja dengan baik<input type="checkbox">
.Fiddle : http://jsfiddle.net/gb2wY/50/
HTML :
CSS :
sumber
:before
dan:after
hanya berfungsi untuk node yang dapat memiliki node anak karena mereka memasukkan simpul baru sebagai simpul pertama atau terakhir.sumber
Saya menemukan bahwa Anda dapat melakukannya seperti ini:
Tampilkan cuplikan kode
Anda harus memiliki div induk yang mengambil bantalan dan: setelah. Orang tua pertama harus relatif dan div kedua harus absolut sehingga Anda dapat mengatur posisi setelahnya.
sumber
Saya punya ide lain untuk menggunakannya:
sumber