Mendeteksi jika suatu input memiliki teks di dalamnya menggunakan CSS - pada halaman yang saya kunjungi dan tidak mengontrol?

Apakah ada cara untuk mendeteksi apakah suatu input memiliki teks di dalamnya melalui CSS? Saya sudah mencoba menggunakan :emptypseudo-class, dan saya sudah mencoba menggunakan [value=""], tidak ada yang berhasil. Sepertinya saya tidak dapat menemukan solusi tunggal untuk ini.

Saya membayangkan ini harus dimungkinkan, mengingat kami memiliki kelas pseudo untuk :checked, dan :indeterminate, keduanya merupakan hal yang serupa.

Harap dicatat: Saya melakukan ini untuk gaya "Bergaya" , yang tidak dapat memanfaatkan JavaScript.

Perhatikan juga, bahwa Stylish digunakan, di sisi klien, pada halaman yang tidak dikontrol pengguna.

Stylish tidak dapat melakukan ini karena CSS tidak dapat melakukan ini. CSS tidak memiliki penyeleksi (pseudo) untuk <input>nilai. Lihat:

• Spesifikasi pemilih W3C
• Selektor yang didukung Mozilla / Firefox
• Cross-browser, tabel dukungan CSS3

The :emptypemilih hanya merujuk pada node anak, tidak nilai input.
[value=""] melakukan kerja; tetapi hanya untuk kondisi awal . Ini karena value atribut simpul (yang dilihat CSS), tidak sama dengan value properti simpul (Diubah oleh pengguna atau javascript DOM, dan dikirimkan sebagai data formulir).

Kecuali jika Anda hanya peduli pada kondisi awal, Anda harus menggunakan skrip usersos atau Greasemonkey. Untungnya ini tidak sulit. Skrip berikut akan berfungsi di Chrome, atau Firefox dengan Greasemonkey atau Scriptish diinstal, atau di browser apa pun yang mendukung skrip pengguna (yaitu sebagian besar browser, kecuali IE).

Lihat demo batas CSS ditambah solusi javascript di halaman jsBin ini .

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}

Mungkin saja, dengan peringatan CSS biasa dan jika kode HTML dapat dimodifikasi. Jika Anda menambahkan requiredatribut ke elemen, maka elemen tersebut akan cocok :invalidatau :validsesuai dengan apakah nilai kontrol kosong atau tidak. Jika elemen tidak memiliki valueatribut (atau memiliki value=""), nilai kontrol awalnya kosong dan menjadi kosong ketika karakter apa pun (bahkan spasi) dimasukkan.

Contoh:

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

Pseudo-classed :validdan :invaliddidefinisikan dalam dokumen CSS tingkat Draf Kerja saja, tetapi dukungan agak meluas di browser, kecuali bahwa di IE, ia datang dengan IE 10.

Jika Anda ingin membuat "kosong" menyertakan nilai yang hanya terdiri dari spasi, Anda bisa menambahkan atribut pattern=.*\S.*.

Tidak ada (saat ini) pemilih CSS untuk mendeteksi secara langsung apakah kontrol input memiliki nilai kosong, jadi kita perlu melakukannya secara tidak langsung, seperti dijelaskan di atas.

Umumnya, penyeleksi CSS merujuk pada markup atau, dalam beberapa kasus, ke properti elemen yang diatur dengan skrip (JavaScript sisi klien), daripada tindakan pengguna. Misalnya, :emptymencocokkan elemen dengan konten kosong di markup; semua inputelemen tak terhindarkan kosong dalam pengertian ini. Selector [value=""]menguji apakah elemen memiliki valueatribut dalam markup dan memiliki string kosong sebagai nilainya. Dan :checkeddan :indeterminatehal-hal serupa. Mereka tidak terpengaruh oleh input pengguna aktual.

Anda bisa menggunakan :placeholder-shownkelas pseudo. Secara teknis placeholder diperlukan, tetapi Anda dapat menggunakan spasi sebagai gantinya.

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

<input onkeyup="this.setAttribute('value', this.value);" />

dan

input[value=""]

akan bekerja :-)

edit: http://jsfiddle.net/XwZR2/

Pada dasarnya yang dicari semua orang adalah:

KURANG:

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

CSS murni:

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}

Anda dapat menggunakan placeholdertrik seperti yang tertulis di atas tanpa requiredbidang.

Masalahnya requiredadalah ketika Anda menulis sesuatu, kemudian menghapusnya - input sekarang akan selalu merah sebagai bagian dari spesifikasi HTML5 - maka Anda akan membutuhkan CSS seperti yang ditulis di atas untuk memperbaiki / menimpanya.

Anda dapat melakukan hal-hal sederhana tanpa required

<input type="text" placeholder="filter here" id="mytest" />

CSS

#mytest:placeholder-shown {
/* if placeholder is shown - meaning - no value in input */
  border: black 1px solid;
  color: black;
}
#mytest {
  /* placeholder isn't shown - we have a value in input */
  border: red 1px solid;
  color: red;
}

Pena kode: https://codepen.io/arlevi/pen/LBgXjZ

Css sederhana:

input[value]:not([value=""])

Kode ini akan menerapkan css yang diberikan pada pemuatan halaman jika input diisi.

Anda dapat gaya input[type=text]berbeda tergantung pada apakah input memiliki teks dengan menata placeholder. Ini bukan standar resmi pada saat ini tetapi memiliki dukungan browser yang luas, meskipun dengan berbagai awalan:

input[type=text] {
    color: red;
}
input[type=text]:-moz-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]::-webkit-input-placeholder {
    color: green;
}

Contoh: http://fiddlesalad.com/scss/input-placeholder-css

Menggunakan JS dan CSS: bukan pseudoclass

 input {
        font-size: 13px;
        padding: 5px;
        width: 100px;
    }

    input[value=""] {
        border: 2px solid #fa0000;
    }

    input:not([value=""]) {
        border: 2px solid #fafa00;
    }

<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />

   

The pemilih yang valid akan melakukan trik.

<input type="text" class="myText" required="required" />

.myText {
    //default style of input
}
.myText:valid {
    //style when input has text
}

Anda dapat memanfaatkan placeholder dan menggunakan:

input:not(:placeholder-shown) {
  border: 1px solid red;
}

Trik Sederhana dengan jQuery dan CSS Seperti:

JQuery:

$('input[value=""]').addClass('empty');
        $('input').keyup(function(){
            if( $(this).val() == ""){
                $(this).addClass("empty");
            }else{
                $(this).removeClass("empty");
            }
        });

CSS:

input.empty:valid{
        box-shadow: none;
        background-image: none;
        border: 1px solid #000;
    }

    input:invalid,
    input:required {
        box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85);
        border: 1px solid rgb(200,0,0);
    }




    input:valid{
        box-shadow: none;
        border: 1px solid #0f0;
    }

lakukan pada bagian HTML seperti ini:

<input type="text" name="Example" placeholder="Example" required/>

Parameter yang diperlukan akan membutuhkannya untuk memiliki teks di bidang input agar valid.

Iya! Anda dapat melakukannya dengan atribut dasar sederhana dengan pemilih nilai.

Gunakan pemilih atribut dengan nilai kosong dan terapkan properti input[value='']

input[value=''] {
    background: red;
}

Ini tidak mungkin dengan css. Untuk menerapkan ini, Anda harus menggunakan JavaScript (misalnya $("#input").val() == "").