CSS შეცვლის ადგილი მფლობელის ფერი. დარგების სახელების გამოჩენა ან როგორ შეცვალოს ადგილი მფლობელი

ძალისხმევას, რათა შეამციროს ფორმა და შეამციროს ვიზუალური ხმაური, დიზაინერები tag შეცვალეთ ადგილი მფლობელის ატრიბუტი, რითაც იზრდება დატვირთვა მოკლევადიანი მეხსიერება. ადამიანები გაუფასურებული ხედვის მინიშნება ძნელია წაკითხული. Უკეთესი ადგილი პირდაპირ ზემოთ შეყვანის სფეროში. ცარიელი ველი უფრო ადვილია აღიაროს, როგორც ელემენტის შევსება.

ცუდი

კარგი

Stylization: შეცვლა ფერი placeholder CSS

შეცვალეთ შეყვანის საველე სტილის წამყვანი CSS

ცუდი

Placeholder ეფექტი

Placeholder ატრიბუტი მხოლოდ მუშაობს და მაშინაც კი, თუ სხვა tags მითითებულია შინაარსობრივი ატრიბუტი.</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="შეგიძლიათ შეიყვანოთ ტექსტი" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="შეგიძლიათ შეიყვანოთ ტექსტი" class="raz"></div> <h2>უძველესი მეხსიერების მეთოდი შეცვლის ღირებულების JavaScript</h2> <input onblur="this.value=(this.value==" Onfocus \u003d."this.value=(this.value==this.title)?" value="ელ ელ" title="ელ ელ"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="ელ ელ" title="ელ ელ" /> <p>Placeholder ატრიბუტი გამოიყენება შექმნას მოთხოვნა ცარიელი შეყვანის სფეროებში (Tags <input> და <textarea>). ამ სტატიაში, მე განიხილავს გზებს ელეგანტური მოთამაშის ქოლბორდერს, ისევე როგორც მათ უფრო მოსახერხებელ გამოყენებას.</p> <p>დავიწყოთ მაგალითისთვის, ვინც ჯერ კიდევ არ იცის, რა PlaySholder არის და როგორ გამოვიყენოთ:</p> <input type= "email" placeholder= "example@gmail.com." > <p> <input type="email" placeholder="example@gmail.com." class="demo-css-placeholders-input"></p> <p>ინტერფეისების განვითარებისას გათვალისწინებული უნდა იყოს სპექტაკლის ქცევის თვისებები. მოთამაშის ტექსტი, როგორც კი შეყვანის დაწყებისთანავე ხდება. ამიტომაც არ არის აუცილებელი, რომ გამოიყენოთ ინფორმაცია შეყვანის სფეროში (რამდენი პერსონაჟი უნდა შეიცავდეს). ამ მიზნით უმჯობესია გამოიყენოთ tag <label> ან პარაგრაფი მცირე წვერი. შეიტყვეთ უფრო მეტი მოთამაშის ქოლესების გამოყენების შესახებ.</p> <h2>სტილიზაცია</h2> <p>შემდეგი წესები გამოიყენება ფეხბურთელის ქოლედერის სტილიზზე:</p> :: - WebKit-input-placeholder (ფერი: ლურჯი;) :: - Moz-placeholder (ფერი: ლურჯი;) / * Firefox 19+ * /: -MOZ- ადგილი (ფერი: ლურჯი;) / * Firefox 18- * /: -ms-input-placeholder (ფერი: ლურჯი;) <p>გამოიყურება საშინელი, არა? და არსებობს ამის მიზეზი - დღემდე, CSS წესების დაკვრა არ იყო სტანდარტიზებული და დანერგვა თითოეულ ბრაუზერში განსხვავებულია. დაწვრილებით შესახებ ყველა საჭირო პრეფიქსები შეგიძლიათ იხილოთ Caniuse.</p> <p>თუ თქვენ იყენებთ CSS Preprocessor, მაშინ სავარაუდოდ, გამოყენების სტილის კინოს მფლობელები, თქვენ იქნება ყველაზე მოსახერხებელი დაწერა მარტივი შერევით. მაგალითი Sass:</p> @Mixin placeholder (&: - webkit-input-placeholder (@ Content;) &: - Moz-placeholder (@ Content;) &: - Moz-placeholder (@ Content;) &: - MS-INPUT-PLACEholder (@ Content ;)) <p>დამოკიდებულია შერევის კონტექსტში, შეგიძლიათ გამოიყენოთ სტილისა და ინდივიდუალური ნივთების გლობალური გამოყენება (სცადეთ SassMeister):</p> <span>// გლობალურად თითოეული შეყვანის ველი</span>@ Pinclude Placeholder (ფერი: ლურჯი;) <span>/ / გარკვეული შეყვანის სფეროებში</span>.ininput (@ Pinclude Placeholder (ფერი: მწვანე;)) <h4>მაგალითი</h4> <p>ლურჯი ტექსტი Playsholder (არასდროს):</p> .Blue-text :: - WebKit-input-placeholder (ფერი: # 2E8ece;) .BLE- ის ტექსტი: -MOZ-placeholder (ფერი: # 2E8ece;) .Blue-text :: - Moz-placeholder (ფერი: # 2E8ece ;) .Blue-text: -ms-input-placeholder (ფერი: # 2E8ece;) <p> <input type="text" placeholder="დაიწყეთ აკრეფა აქ" class="demo-css-placeholders-input pl-blue-text"></p> <h2>მხარდაჭერილი თვისებები</h2> <p>არა ყველა CSS ქონება შეიძლება გამოყენებულ იქნას PlayCold- ით. აქ არის მხარდაჭერილი თვისებების სრული სია:</p> <ul><li>შრიფტი და ყველა დაკავშირებული თვისებები (შრიფტის ზომა, შრიფტი-ოჯახი და ა.შ.)</li> <li>ფონისა და ყველა დაკავშირებული თვისებები (ფონის ფერი, ფონის გამოსახულება და ა.შ.)</li> <li>ხოცვა</li> <li>ტექსტი</li> <li>ტექსტური overflow.</li> <li>ფერი</li> <li>ტექსტური ტრანსფორმაცია</li> <li>Ხაზის სიმაღლე</li> <li>სიტყვა-ინტერვალი</li> <li>წერილი-ინტერვალი</li> <li>ტექსტის გაფორმება.</li> <li>ვერტიკალური გასწორება</li> </ul><h2>გაცოცხლება</h2> <p>ანიმაციური იდეები ეკუთვნის HTML5.BY დღიურში.</p> <p>ყველა შემდეგი მაგალითი დაწერილია Sass Preprocessor- ის გამოყენებით. თითოეული მათგანი უკავშირდება ბმულს Sassmeister, რომელიც შეგიძლიათ შეადგინოს CSS კოდი.</p> <p>სავარაუდოდ, გსურთ გამოიყენოთ ანიმაციები კინოს მფლობელებს, როდესაც ფოკუსირება შეყვანის სფეროში. ეს ყველაფერი საკმაოდ მარტივია. მხოლოდ რამდენიმეჯერ გამოყენებული ადრე mixin placeholder:</p> .ininput (@ Pinclude Placeholder ( <span>/ / სტილის ნორმალური სახელმწიფო</span> ) &: FOCUS (@ Pinclude Placeholder ( <span>/ / Styles შემდეგ ფოკუსების ღონისძიება</span> } } } <h3>გამჭვირვალობის შეცვლა</h3> .INIPUPPUT (ფერი: #AAA; <p> <input type="text" placeholder="დემო: გამჭვირვალობის შეცვლა" class="demo-css-placeholders-input pl-opacity"></p> <h3>გადაადგილება მარჯვნივ და მარცხნივ</h3> <p>უფრო დიდი შეყვანის საველე სიგანე, უფრო დიდი მნიშვნელობა უნდა იყოს ტექსტის შემოღების ქონების ღირებულება. სტანდარტული შეყვანის ველი, 500px საკმარისი იქნება, რადგან ეს აუცილებელია ხელით შეარჩიო. შეყვანის სფეროს სიგანე და ტექსტის შემოღების ღირებულება დამოკიდებულია ანიმაციის სიჩქარით. გადაადგილება, თქვენ უნდა გამოიყენოთ უარყოფითი ღირებულებები, მაგალითად -500px.</p><p> <input type="text" placeholder="Demo: გადაადგილება მარჯვნივ" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demo: Shift მარცხენა" class="demo-css-placeholders-input pl-shift-left"></p> <h3>გადაადგილება ქვემოთ</h3> <p>როგორც ბოლო მაგალითში ანიმაცია დამოკიდებულია შეყვანის ნებით, მაგრამ ამ შემთხვევაში ყურადღება გამახვილებულია სიმაღლეზე. უმრავლესობის შეყვანის სფეროებში, სასურველი ხაზის სიმაღლის ღირებულება 100px- ში იქნება. სამწუხაროდ, ხაზის სიმაღლის ქონების გამოყენებით, შეუძლებელია ცვლის ეფექტის განხორციელება, რადგან ქონება უარყოფით ღირებულებებს არ იღებს.</p> .ininput (ტექსტი-ინტენსიური: 0px; გარდამავალი: ტექსტი-ინტენსიური 300ms;) &: FOCUS (@ პუნქტიანი Placeholder (Text-Indent: 500px;))) <p> <input type="text" placeholder="Demo: Shift Down" class="demo-css-placeholders-input pl-shift-down"></p> <h3>ერთად</h3> <p>PlayColders- ისთვის ანიმაციური კოდის გამოყენება, სასიამოვნო და მოსახერხებელი იყო, თქვენ შეგიძლიათ დაწეროთ პატარა ბიბლიოთეკის მიქსები ნებისმიერი პრეპარატისთვის. ბიბლიოთეკა ასე გამოიყურება ():</p> @Mixin placeholder (&: - webkit-input-placeholder (@ Content) &: - Moz-placeholder (@ Content) &: - Moz-placeholder (@ Content) &: - MS-INPUT-Placeholder (@ Content)) @ MIXIN PL-SHITCH ($ SIDE: LEFT, $ პოზიცია: 500px, $ Durationholder) (@ PACKLUE PLACEHOLDER (TEXT-Indent: 0; გარდამავალი: ტექსტი-ინტენსიური $ ხანგრძლივობა;) &: Focus (@ PATEGLUE PLACEHOLDER) თუ ($ გვერდი \u003d\u003d მარცხნივ, - $ პოზიცია, $ პოზიცია);)) @mixin pl-slide-down ($ პოზიცია: 5, $ ხანგრძლივობა: 200ms) (@ პუნქტი Placeholder (Line-Height: 1; გარდამავალი: LINE-SIGHT $ ხანგრძლივობა;) &: ფოკუსი (@ Pinclude Placeholder (Line სიმაღლე: $ პოზიცია;))) @ Mixin Pl-Fade-Out ($ Duration: 200ms) (@შელაგის ადგილი (Opacity: 1; გარდამავალი: Opacity $ ხანგრძლივობა;) &: ფოკუსი (@შეცტყველ ადგილას (Opacity: 0;)) <p>ძალიან მარტივია მისი გამოყენება. საკმარისია დასაკავშირებლად სასურველი შერევით ნებისმიერი საველე შეყვანის ველი ან უბრალოდ შექმნას ერთი გლობალური წესი ყველა paysholeders გვერდზე:</p> <span>// ინდივიდუალური ელემენტებისათვის</span>.Pl-Shift-Right (@ Pl-Shift (მარჯვნივ);) .PL-Fade-Out (@ Pl-Fade-Out;) <span>// დასასვენებლად</span>@ Pl-Shift (მარცხნივ); <h2>Autoprefixer.</h2> <p>თუ არ იყენებთ პრეპარატის გამოყენებას და ჯერ კიდევ არ გსურთ თქვენი წყარო CSS ფაილი, რათა გადაიზარდოს ფაფა ყველა შესაძლო ბრაუზერისთვის პრეფიქსებისგან, შემდეგ ყურადღება მიაქციეთ AutoProfixer- ს. მასთან ერთად, Pure CSS შეიძლება გაკეთდეს ბინძური (მაგრამ უკვე სხვა ფაილში) მიერ დასძინა ყველა საჭირო prefixes ყველა თვისებები. Passyholders- თან მუშაობის მიზნით, საკმარისია Pseudo-Element- ის გამოყენება :: Placeholder:</p> :: placeholder (ფერი: ნარინჯისფერი;). შეყვანა :: placeholder (ფერი: ლურჯი;) <p>მას შემდეგ, რაც ბატარეის parsing, AutoProfixer შექმნის ცალკე CSS ფაილი, რომელიც დაწერს ყველა საჭირო პრეზიქსი ყველა ბრაუზერის თქვენ მითითებული.</p> <h2>Რა არის შემდეგი</h2> <p>როგორც ზემოთ უკვე დაწერილი, ყველაფერი, რაც უკავშირდება Playswords- ს სტილის გამოყენებას, ჯერ არ არის სტანდარტიზებული. მალე გამოსწორდება. სელექტორის დონე 4 სპეციფიკაცია დაემატა ფსევდო-კლასს: პლაცდერის ნაჩვენებია, რომელიც საბოლოოდ გამოიწვევს სტანდარტებს ფსევდოკლასის და ფსევდო-ელემენტებს, რომლებიც ახლა არსებობს. თქვენ შეგიძლიათ დაიცვას Caniuse- ის მხარდაჭერა (ახლა ბრაუზერში არ არის მხარდაჭერილი).</p> <p>გამოიყენეთ სტილის ერთად: placeholder- ნაჩვენები იქნება ბევრად უფრო მარტივი:</p> .intput: placeholder- ნაჩვენებია (ფერი: ლურჯი;) <p>Placeholder ატრიბუტი გამოიყენება იმისათვის, რომ მოვუწოდებთ მოქმედებას ცარიელი ელემენტების შეყვანის და ტექსტის შიგნით. ამ სტატიაში, ჩვენ განვიხილავთ ტექსტის ადგილსამყოფელის სტილისას, ისევე როგორც ზოგიერთი ხრიკს, რომელიც უფრო კომფორტულ და ფუნქციურს გახდის.</p> <p>ასე რომ, დავიწყოთ მაგალითისთვის, ვისაც არ იცის, რა ადგილია.</p> <h4>html</h4> <input type="text" placeholder="დატოვე შეტყობინება აქ"> <p>Placeholder - სტილი შეიძლება შეიცვალოს ასეთი კომპლექტი CSS წესების მიხედვით:</p> <h4>cSS.</h4> :: - WebKit-Input-placeholder (ფერი: # C0392b;) :: - Moz-placeholder (ფერი: # C0392b;) / * Firefox 19+ * /: -Moz- ადგილი (ფერადი: # C0392b;) / * Firefox 18- * /: -ms-input-placeholder (ფერი: # C0392b;) <p>ეს გამოიყურება საშინელი, არა? ფაქტია, რომ ეს ჯერ კიდევ არ არის სტანდარტებში. თითოეული ბრაუზერი განხორციელდა ადგილსამყოფელის სტილიზაციისთვის.</p> <p>IE და ძველი Firefox (სანამ მე -18) placeholder ითვლება pseudolass, და ახალი Firefox, WebKit და Blink - ფსევდო-ელემენტს.</p> <p>ჩვენ ვნახავთ რა მოხდა:</p> <p>უნდა ითქვას, რომ ყველა შესაძლო CSS თვისებები არ არის მხარდაჭერილი. ყველაზე თანამედროვე ბრაუზერები საშუალებას გაძლევთ შეცვალოთ:</p> <ul><li>შრიფტი (და მასთან დაკავშირებული თვისებები)</li> <li>ფონის (და მასთან დაკავშირებული თვისებები)</li> <li>ფერი</li> <li>სიტყვა-ინტერვალი</li> <li>წერილი-ინტერვალი</li> <li>ტექსტის გაფორმება.</li> <li>ვერტიკალური გასწორება</li> <li>ტექსტური ტრანსფორმაცია</li> <li>Ხაზის სიმაღლე</li> <li>ტექსტი</li> <li>ტექსტური overflow.</li> <li>ხოცვა</li> </ul><h2>და თუ ადგილსამყოფელი არ შეესაბამება?</h2> <p>ზოგჯერ საველე შესვლის ველი მცირდება Laouta- ის მახასიათებლების გამო, კერძოდ მობილურ მოწყობილობებზე. ამ შემთხვევაში, გრძელი ტექსტი მფლობელი - იქნება მახინჯი დაჭრილი. ამის თავიდან ასაცილებლად შეგიძლიათ გამოიყენოთ ტექსტი-overflow: ellipsis. ასეთი სინტაქსი ყველა ახალ ბრაუზერში იმუშავებს.</p> <h4>cSS.</h4> შეყვანა (ტექსტი-overflow: ellipsis;) შეყვანა :: - Moz-placeholder (ტექსტი-overflow: ellipsis;) შეყვანის: -moz-placeholder (ტექსტი-overflow: ellipsis;) შეყვანის: -ms-input-placeholder (ტექსტური overflow : ელიფსი;) <h2>როგორ დამალვა placeholder ფოკუსში?</h2> <p>Placeholder იმალება განსხვავებულია.</p> <ol><li>ზოგიერთ ბრაუზერში, როდესაც მიღების ფოკუსირება incom</li> <li>სხვა ბრაუზერებში, თუ თქვენ გაქვთ მინიმუმ ერთი სიმბოლო</li> </ol><p>მე მიყვარს პირველი ვარიანტი. იმისათვის, რომ ასეთი ქცევის ყველა ბრაუზერში ვთხოვოთ, რომ მხარს უჭერენ წამების მფლობელს, ჩვენ განვსაზღვრავთ შემდეგ CSS წესებს:</p> <h4>cSS.</h4> ფოკუსი :: - WebKit-Input-Placeholder (Color: გამჭვირვალე): ფოკუსი :: - Moz-Placeholder: ფოკუსია: -moz-placeholder (ფერი: გამჭვირვალე): ფოკუსი: -ms-input-placeholder (ფერი: გამჭვირვალე) <h2>დამალვა წამყვანი ლამაზად</h2> <p>თქვენ ასევე შეგიძლიათ დაამატოთ გარდამავალი გამოჩენა და დამალვა placeholder-a:</p> <h4>cSS.</h4> / * Smoolder- ის გამჭვირვალობის გლუვი ცვლილება, როდესაც ფოკუსირება * / .input1 :: - WebKit-input-placeholder (Opacity: 1; გარდამავალი: Opacity 0.3s მარტივად;) .input1 :: Moz-placeholder (Opacity: 1; Transpion: Opacity 0.3s;) .Inputt1: -MOZ-placeholder (Opacity: 1; გარდამავალი: Outacity 0.3s მარტივია;) .in2: -MS-input-placeholder (Opacity: 1; გარდამავალი: Opacity 0.3s მარტივად;). ფოკუსი :: - WebKit-Input-Placeholder (Opacity: 0; გარდამავალი: Opacity 0.3s მარტივია;) .input1: ფოკუსი :: - Moz-placeholder (Opacity: 0; გარდამავალი 0.3s მარტივია;). -მო-პლაცდერი (Opacity: 0; გარდამავალი: Opacity 0.3s მარტივად;) .INPUPT1: ფოკუსი: -MS-INPUT-PLAYHOLDER (OPACITY: 0; გარდამავალი: Opacity 0.3s მარტივად;) / * Shift Placeholder- ის მარჯვენა ფოკუსირება * / .input2 :: - webkit-input-placeholder (ტექსტი-indent: 0px; გარდამავალი: ტექსტი-ინტენსიური 0.3s მარტივად;) .input2 :: Moz-placeholder (ტექსტი-ინტენსიური: 0px; გარდამავალი 0.3s მარტივად;) .input2: -moz- ადგილი (ტექსტი-ინტენსიური: 0px; გარდამავალი: ტექსტი-ინტენსიური 0.3s მარტივად;) .input2: -MS-INPUT-Placeholde R (ტექსტი-ინტენსიური: 0px; გარდამავალი: ტექსტი-ინტენსიური 0.3s მარტივად;) .input2: Focus :: - WebKit-input-placeholder (ტექსტი-indent-placeholder (Text-Indent-Placeholder (Text-indent: 500px; გარდამავალი: ტექსტი-ნაადრევი 0.3s მარტივად;) .input2: ფოკუსი :: - Moz-placeholder ( ტექსტი-ინტენსიური: 500px; გარდამავალი: ტექსტი-ნაადრევი 0.3s მარტივად;) .input2: ფოკუსირება: -მო-ადგილი (ტექსტი-განზომილება: 500px; გარდამავალი: ტექსტი-ნაადრევი 0.3s;) .input2: ფოკუსი, შეყვანის ადგილის მფლობელი (ტექსტი-ინტენსიური: 500px; გარდამავალი: ტექსტი-ინტენსიური 0.3s მარტივად;) / * Shift Placeholder-A ქვემოთ, როდესაც ფოკუსირება * / .input3 :: - WebKit-input-placeholder (Line-line სიმაღლე: 20px; გარდამავალი. ხაზის სიმაღლე 0.5s მარტივად;) .input3 :: Moz-placeholder (Line-Hezeholder (Line-Height: 20px; გარდამავალი: Line-Line-Light 0.5s მარტივად;) .Input3: -MOZ- ადგილი (Line-Placeholder (Line-Headholder (Line-Hezeholder; Transition: LINE -Height 0.5s მარტივად;) .Input3: -MS-input-placeholder (Line-Height: 20px; გარდამავალი: Line-Line-Sight 0.5s მარტივად;) .input3: Focus :: - WebKit-Input-Placeholder (Line-Input-Placeholder (Line სიმაღლე: 100px; გარდამავალი: ხაზის სიმაღლე 0.5s მარტივად;) .input3: ფოკუსი :: - Moz-placeholder (Line-Headeholder (Line-Height: 100px; გარდამავალი: ხაზის სიმაღლე 0.5s მარტივად;) .input3: - ფოკუსი: ER (ხაზის სიმაღლე: 100px; გარდამავალი: ხაზის სიმაღლე 0.5s მარტივად;) .input3: ფოკუსირება: -ms-input-placeholder (line-height: 100px; გარდამავალი: ხაზის სიმაღლე 0.5s მარტივად;) <p>ვიმედოვნებ, რომ ეს მოსახერხებელია. დაწერეთ კომენტარები და წინადადებები კომენტარებში.</p> <p>PlayColeDer არის ელემენტის შეყვანის სფეროში, რომელშიც შეგიძლიათ განათავსოთ მინიშნება. როდესაც მომხმარებელი იწყება მონაცემების შესასვლელად, დამხმარე ტექსტი ქრება არ ერევა. თითოეულ ბრაუზერს აქვს საკუთარი აზრი იმის შესახებ, თუ როგორ უნდა გამოჩნდეს ეს ელემენტი, ზოგჯერ ნაგულისხმევი სტილის შექმნა მთელი დიზაინი. მართოს მათ, თქვენ უნდა გამოვიყენოთ სპეციალური CSS Placeholder წესი.</p> <h2>სად არის PlayColeDer?</h2> <p>პრობლემა ისაა, რომ შეყვანის საველე მინიშნება უსაფრთხოდ არის დაფარული DOM ჩრდილში, და ეს არ არის ადვილი მისაღებად მას. ეს იყენებს სპეციალური არასტანდარტული :: placeholder. მასთან ერთად, თქვენ შეგიძლიათ გააკონტროლონ PROMPERTIES.</p> <p>CSS- ზე ჰოლდინგის სტილიზაცია ასე გამოიყურება:</p><p>შეყვანა :: Placeholder (ფერი: წითელი; Opacity: 1; შრიფტი-სტილი: Italic;)</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/39768/2606908.jpg' width="100%" loading=lazy loading=lazy></p> <h2>მხარდაჭერა ბრაუზერები</h2> <p>CSS Placeholder- ის ფსევდო-ელემენტი კარგად არის დამუშავებული ყველა თანამედროვე ბრაუზერით, და ძველი ბრაუზერების მხარდასაჭერად, შეგიძლიათ გამოიყენოთ პრეფიქსები:</p> <ul><li>:: - WebKit-input-Placeholder - for WebKit ბრაუზერი (Safari, Chrome, Opera);</li> <li>:: - Moz-placeholder - Firefox ბრაუზერები ზემოთ 19 ვერსიაში;</li> <li>: -Moz- ადგილი - ძველი Firefox- ისთვის;</li> <li>: -MS-input-placeholder - Internet Explorer ზემოთ 10 ვერსია.</li> </ul><p>როგორც ჩანს, ძველი Mozilla ბრაუზერები, ისევე როგორც ანუ, განიხილოს ადგილი მფლობელი CSS-Pseudoclass, არ ფსევდო-ელემენტს. ჩვენ არ დავამტკიცებთ მათთან, უბრალოდ გაითვალისწინეთ ეს ასპექტი, როდესაც შეყვანის სფეროს სტილი.</p> <p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/39768/2606909.jpg' width="100%" loading=lazy loading=lazy></p> <h2>სტილიზაციის შესაძლებლობები</h2> <p>Pseudo-Element Placeholder- ისთვის CSS- ში შეგიძლიათ მითითებული შემდეგი პარამეტრების მითითება:</p> <ul><li>ფონის - ჯგუფის მოთხოვნა ბლოკი ვრცელდება ყველა შეყვანის სფეროში. თქვენ შეგიძლიათ მიუთითოთ არა მხოლოდ ფერი (ფონის ფერი), არამედ გამოსახულება (ფონის სურათი).</li> <li>ტექსტის ფერი - ფერი;</li> <li>გამჭვირვალობა - opacity;</li> <li>ხაზგასმული, undarching ან გადაჰყურებს - ტექსტი-გაფორმება;</li> <li>რეგისტრაცია - ტექსტური-ტრანსფორმაცია;</li> <li>შიდა ინდპენტებს - padding. ეს არ არის მხარდაჭერილი ყველა ბრაუზერის მიერ. რაც შეეხება ქვემო ელემენტებს, ზედა და ქვედა ინდიკატორები იგნორირებულია.</li> <li>შრიფტის ჩვენება - შრიფტის, ხაზის სიმაღლის ჯგუფის თვისებები და მრავალფეროვანი ინდპენტები (ტექსტი-ინტენსიური, წერილი-სივრცე, სიტყვა-ინტერვალი);</li> <li>ვერტიკალური განლაგება სიმებიანი - ვერტიკალური გასწორება;</li> <li>trimming ტექსტი, როდესაც კონტეინერი არის overflowing - ტექსტი- overflow.</li> </ul> .in2put1 :: placeholder (ცაცხვი, ცაცხვი, ლურჯი) ფერი: თეთრი;) .input2 :: placeholder (ტექსტი-გაფორმება: ხაზი; ფერი: purple; შრიფტი-წონა: სქელი;). Input3 :: placeholder (შრიფტი -SIZE: 16px; letter-spaction: 10px;) .input4 :: placeholder (ფონის: ყავისფერი ფერი: თეთრი, ტექსტი-overflow: ellipsis;) <h2>ფოკუსში</h2> <p>By default, წვერი ქრება შეყვანის სფეროში მხოლოდ იმ შემთხვევაში, თუ მინიმუმ ერთი ხასიათი შევიდა მას. მაგრამ ადგილსამყოფელი საშუალებას გაძლევთ გაუჩინარების გაკეთება დაუყოვნებლივ, როდესაც ფოკუსირება სფეროში. ამისათვის დააკავშიროთ ის ფსევდოლასთან: ფოკუსირება.</p><p>შეყვანის: ფოკუსი :: Placeholder (ფერი: გამჭვირვალე;)</p><p>ზოგიერთ ბრაუზერში, დასაშვებია შეცვალოს ცვლილება მოთამაშის მიერ გარდამავალი ინსტრუქციის გამოყენებით.</p><p>შეყვანის :: Placeholder (ფერი: შავი; გარდამავალი: ფერი 1s;) შეყვანის: ფოკუსი :: Placeholder (ფერი: თეთრი;)</p><p>Google Chrome- ის ბრაუზერში, ამგვარი ველის ფოკუსირებისას, ერთი წამით შეუფერხებლად შეიცვლება.</p> <p>PlayColeDer არის ელემენტის შეყვანის სფეროში, რომელშიც შეგიძლიათ განათავსოთ მინიშნება. როდესაც მომხმარებელი იწყება მონაცემების შესასვლელად, დამხმარე ტექსტი ქრება არ ერევა. თითოეულ ბრაუზერს აქვს საკუთარი აზრი იმის შესახებ, თუ როგორ უნდა გამოჩნდეს ეს ელემენტი, ზოგჯერ ნაგულისხმევი სტილის შექმნა მთელი დიზაინი. მართოს მათ, თქვენ უნდა გამოვიყენოთ სპეციალური CSS Placeholder წესი.</p> <h2>სად არის PlayColeDer?</h2> <p>პრობლემა ისაა, რომ შეყვანის საველე მინიშნება უსაფრთხოდ არის დაფარული DOM ჩრდილში, და ეს არ არის ადვილი მისაღებად მას. ეს იყენებს სპეციალურ არასტანდარტულ ფსევდო-ელემენტს CSS :: placeholder. მასთან ერთად, თქვენ შეგიძლიათ გააკონტროლონ PROMPERTIES.</p> <p>თქვენ იქნება განკუთვნილი:</p> <p><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/4f1695522eb38124e423c90938dc189d.jpg' width="100%" loading=lazy loading=lazy></p><p>CSS- ზე ჰოლდინგის სტილიზაცია ასე გამოიყურება:</p> <p>შეყვანა :: Placeholder (ფერი: წითელი; Opacity: 1; შრიფტი-სტილი: Italic;) <br><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/050be174ed3b60dc7c49fe3cd59e15ba.jpg' width="100%" loading=lazy loading=lazy></p><h2>მხარდაჭერა ბრაუზერები</h2> <p>CSS Placeholder- ის ფსევდო-ელემენტი კარგად არის დამუშავებული ყველა თანამედროვე ბრაუზერით, და ძველი ბრაუზერების მხარდასაჭერად, შეგიძლიათ გამოიყენოთ პრეფიქსები:</p> <ul><li>:: - WebKit-input-Placeholder - for WebKit ბრაუზერი (Safari, Chrome, Opera);</li> <li>:: - Moz-placeholder - Firefox ბრაუზერები ზემოთ 19 ვერსიაში;</li> <li>: -Moz- ადგილი - ძველი Firefox- ისთვის;</li> <li>: -MS-input-placeholder - Internet Explorer ზემოთ 10 ვერსია.</li> </ul><p>როგორც ჩანს, ძველი Mozilla ბრაუზერები, ისევე როგორც ანუ, განიხილოს ადგილი მფლობელი CSS-Pseudoclass, არ ფსევდო-ელემენტს. ჩვენ არ დავამტკიცებთ მათთან, უბრალოდ გაითვალისწინეთ ეს ასპექტი, როდესაც შეყვანის სფეროს სტილი.</p> <p><img src='https://i2.wp.com/ruud.ru/wp-content/uploads/2018/06/7563ac2e917a7adb9324bb1d45af7f8e.jpg' width="100%" loading=lazy loading=lazy></p><h2>სტილიზაციის შესაძლებლობები</h2> <p>Pseudo-Element Placeholder- ისთვის CSS- ში შეგიძლიათ მითითებული შემდეგი პარამეტრების მითითება:</p> <ul><li>ფონის - ფონური თვისებების ჯგუფი. სწრაფი ბლოკის ფონზე ვრცელდება მთელი შეყვანის ველი. თქვენ შეგიძლიათ მიუთითოთ არა მხოლოდ ფერი (ფონის ფერი), არამედ გამოსახულება (ფონის სურათი).</li> <li>ტექსტის ფერი - ფერი;</li> <li>გამჭვირვალობა - opacity;</li> <li>ხაზგასმული, undarching ან გადაჰყურებს - ტექსტი-გაფორმება;</li> <li>რეგისტრაცია - ტექსტური-ტრანსფორმაცია;</li> <li>შიდა ინდპენტებს - padding. ეს არ არის მხარდაჭერილი ყველა ბრაუზერის მიერ. რაც შეეხება ქვემო ელემენტებს, ზედა და ქვედა ინდიკატორები იგნორირებულია.</li> <li>შრიფტის ჩვენება - შრიფტის, ხაზის სიმაღლის ჯგუფის თვისებები და მრავალფეროვანი ინდპენტები (ტექსტი-ინტენსიური, წერილი-სივრცე, სიტყვა-ინტერვალი);</li> <li>ვერტიკალური განლაგება სიმებიანი - ვერტიკალური გასწორება;</li> <li>trimming ტექსტი, როდესაც კონტეინერი არის overflowing - ტექსტი- overflow.</li> </ul><p>Input1 :: placeholder (ცაცხვი, ლურჯი) ფერი: თეთრი;) .input2 :: placeholder (ტექსტი-გაფორმება: ხაზი; ფერი: purple; შრიფტი-წონა: სქელი;) .input3 :: placeholder (Font-Size: 16px; letter-spaction: 10px;) .input4 :: placeholder (ფონის: ყავისფერი ფერი: თეთრი, ტექსტი-overflow: ellipsis;)</p><h2>ფოკუსში</h2> <p>By default, წვერი ქრება შეყვანის სფეროში მხოლოდ იმ შემთხვევაში, თუ მინიმუმ ერთი ხასიათი შევიდა მას. მაგრამ CSS Placeholder- ის ფსევდო-ელემენტი საშუალებას გაძლევთ გაუჩინარების დაუყოვნებლივ, როდესაც ფოკუსირება სფეროში. ამისათვის დააკავშიროთ ის ფსევდოლასთან: ფოკუსირება.</p> <p>შეყვანის: ფოკუსი :: Placeholder (ფერი: გამჭვირვალე;)</p><p>ზოგიერთ ბრაუზერში, დასაშვებია შეცვალოს ცვლილება მოთამაშის მიერ გარდამავალი ინსტრუქციის გამოყენებით.</p> <p>შეყვანის :: Placeholder (ფერი: შავი; გარდამავალი: ფერი 1s;) შეყვანის: ფოკუსი :: Placeholder (ფერი: თეთრი;)</p><p>Google Chrome- ის ბრაუზერში, ამგვარი ველის ფოკუსირებისას, ერთი წამით შეუფერხებლად შეიცვლება.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="dsperelink"> <div class="read-analog"> <style> </style> <style> #perelink-horizontal { vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 192px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img { width: 192px; height: 192px; margin-bottom: 10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ka/kak-sozdat-png-s-prozrachnostyu-v-adobe-photoshop-versii-cc-i-vyshe-pochemu-photoshop-ne.html"> <img src="/uploads/93fe94cb7c619bb0b0403d4629876643.jpg" height="192" width="192" loading=lazy loading=lazy> <span>რატომ Photoshop ვერ გაიხსნება ეს png სწორად?</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ka/pochemu-zakryvaetsya-fotoshop-vosstanovlenie-failov-adobe-photoshop-psd.html"> <img src="/uploads/d4019df9bded06f6065dc0b231f612a2.jpg" height="192" width="192" loading=lazy loading=lazy> <span>Restore Adobe Photoshop ფაილი (</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ka/kak-v-fotoshope-sdelat-sneg-realistichnyi-padayushchii-sneg-na-zimnih.html"> <img src="/uploads/64e9440d96bfb2bccef436fd8913eaa0.jpg" height="192" width="192" loading=lazy loading=lazy> <span>რამდენად სწრაფად და დამოუკიდებლად გააკეთე ლამაზი კოლაჟი Photoshop მოშორება არასასურველი ნიმუშების გამოსახულება</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://olympsb.ru/ka/ischezayut-linii-ot-kisti-v-fotoshope-reshaem-problemu-s-propavshim.html"> <img src="/uploads/a68f8a3beadd2c7f16bb441d1b0f9617.jpg" height="192" width="192" loading=lazy loading=lazy> <span>ჩვენ პრობლემის მოგვარება დაკარგული ფუნჯი კონტურის Photoshop</span> </a> </div> </div> </div> </div> </div> </article> </div> </section> <aside class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation"> <div class="mainnavbar side-box clear"> <div id="nav_menu-2" class="side-box_b"> <div class="menu-sidenav-container"> <ul id="menu-sidenav" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/total/">საერთო</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/hard-drive/">HDD</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/different/">miscellanea</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/windows/">ქარხანა</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/apple/">ვაშლი.</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/android/">Androd</a> </li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/browsers/">ბრაუზერები</a> </li> </ul> </div> </div> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">ტოპ 5:</span> <ul class="textw_a clear"> <li><a href="https://olympsb.ru/ka/podpisi-k-fotografiyam-na-vypusknoi-v-shkole-shkolnaya-gazeta.html">სკოლის გაზეთი "მხოლოდ კლასი</a></li> <li><a href="https://olympsb.ru/ka/shkolnaya-gazeta-prosto-klass-podborka-citat-i-statusov-pro.html">შერჩევა შეთავაზებები და სტატუსი შესახებ დამთავრების წარწერების სკოლის ფოტოები</a></li> <li><a href="https://olympsb.ru/ka/adobe-bridge-ne-otkryvaet-camera-raw-aktivirovat-plagin-camera-raw-dlya-adobe-bridge-cc.html">Adobe Bridge CC (უფასო) კამერის ნედლეულის გააქტიურება, Photoshop ელემენტების ყიდვისას - ვინმეს სცადა?</a></li> <li><a href="https://olympsb.ru/ka/risuem-klyaksu-sozdaem-kaplyu-chernilnaya-klyaksa-v-uroke-fotoshopa-risuem.html">დახაზეთ Klyaks, შექმნათ წვეთი, მელნის blots ფოტო stoof graffiti ფუნჯი for Photoshop</a></li> <li><a href="https://olympsb.ru/ka/sohranenie-dokumenta-v-vorde-kombinacii-klavish-sohranit.html">ძირითადი კომბინაციები შენახვა ფაილის ცხელი კლავიშები</a></li> </ul> </div> <div class="side-box lastfaq faqli clear"> <span class="title-f">ბოლო მასალები:</span> <ul> <li> <a href="https://olympsb.ru/ka/oformlenie-fotografii-v-stile-fentezi-uroki-fotoshop-obrabotka-foto-v-stile.html" >ფანტასტიკა სტილი დიზაინი</a> </li> <li> <a href="https://olympsb.ru/ka/kisti-chernilnye-klyaksy-dlya-fotoshopa-risuem-klyaksu-sozdaem-kaplyu.html" >დახაზეთ ყვავილობა, შექმენით წვეთი, მელნის ბლოკები ფოტო სკოლის გაკვეთილში</a> </li> <li> <a href="https://olympsb.ru/ka/uroki-fotoshop-obrabotka-foto-v-stile-fentezi-kartina-so-skripachkoi-v.html" >ფანტასტიკა ფოტო დამუშავება</a> </li> <li> <a href="https://olympsb.ru/ka/reshaem-problemu-s-propavshim-konturom-kisti-v-fotoshope-kak.html" >როგორ შევქმნათ ფუნჯი Photoshop- ში</a> </li> <li> <a href="https://olympsb.ru/ka/kak-pomenyat-vremya-sutok-v-fotoshope-menyaem-vremya-sutok-na-fotografii.html" >ფოტოების შეცვლა ფოტოში</a> </li> </ul> </div> <div class="side-box clear"> <div id="rexuta2" style="height:800px;width:240px;" align="center"></div> </div> </aside> </section> <div class="footer"> <div id="footer_mainnav" class="mainnav collapse navbar-collapse col-xs-12 col-sm-12"> <ul id="menu-mainnav-1" class="nav navbar-nav navi"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/flash-drives/">ფლეშ დრაივები</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/total/">საერთო</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/hard-drive/">HDD</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/different/">miscellanea</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://olympsb.ru/ka/category/windows/">ქარხანა</a></li> </ul> </div> <div class="twobl-footer col-xs-12 col-sm-12"> <div class="onef col-xs-12 col-sm-3"> <div class="fool2og log-m_h1"> <img src='/public/logo.png' loading=lazy loading=lazy> </div> <div class="decksite"></div> </div> <div class="twof col-xs-12 col-sm-2"> <ul id="menu-foonav" class="twonavig"> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ka/category/apple/">ვაშლი.</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ka/category/android/">Androd</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ka/category/browsers/">ბრაუზერები</a></li> <li id="menu-item-" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-"><a href="https://olympsb.ru/ka/category/flash-drives/">ფლეშ დრაივები</a></li> </ul> </div> <div class="treef col-xs-12 col-sm-4"> <ul class="f-post"> <li><a href="https://olympsb.ru/ka/fail-psd-prevratit-v-jpg-dobavte-psd-faily-v-fotokonverter.html">სანიშნეს PSD ფაილი ფოტო კონვერტორი</a></li> <li><a href="https://olympsb.ru/ka/sozdanie-staroi-gazety-v-photoshop-delaem-v-fotoshop-tekst-vyrezannyi.html">ჩვენ გავაკეთებთ Photoshop ტექსტი მოჩუქურთმებული გაზეთების დამატება თეთრი მოწყვეტილი კიდეები</a></li> <li><a href="https://olympsb.ru/ka/kak-opredelit-cvet-v-photoshop-kak-opredelit-cvet-v-fotoshope-kak-zamenit-odin.html">როგორ განვსაზღვროთ ფერი Photoshop- ში?</a></li> <li><a href="https://olympsb.ru/ka/kak-razmyt-kraya-v-fotoshope-kak-legko-i-bystro-sdelat.html">როგორ სწრაფად და სწრაფად გააკეთოს blurry კიდეები Photoshop?</a></li> </ul> </div> <div class="fourf col-xs-12 col-sm-3"> <div class="buth"> <a class="butt-faq buttorang" href="" title="კონტაქტები">კონტაქტები</a> </div> <p class="continfo">კომპიუტერული დახმარება Olympus</div> </div> <div class="tree-footer col-xs-12 col-sm-12 clear"> © 2021. olympsb.ru. კომპიუტერული დახმარება Olympus.</div> </div> <script src="https://olympsb.ru/wp-content/themes/vsepropechen/js/bootstrap.min.js"></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/wp-postratings/postratings-js.js?ver=1.83'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.7.6'></script> <script type='text/javascript' src='https://olympsb.ru/wp-content/plugins/disqus-comment-system/media/js/count.js?ver=4.7.6'></script> <div style="display:none"> <div id="text-3" class="conter-metr"> <div class="textwidget"> </script> </div> </div> </div> <div id="top-link"> <a href="https://olympsb.ru/ka/#top"></a> </div> <script type="text/javascript">  </script><br> <br> </body> </html> </div>