Орлуулагчийн өнгийг тохируулна уу. CSS хэв маягийг ашиглан орлуулагчийн зөвлөмжийн текстийн өнгийг хэрхэн өөрчлөх вэ? Орлуулагчийг сайхан нууж байна

Ихэвчлэн оролт болон текст талбар дээрх орлуулагчийн атрибут нь эдгээр элементүүдийн доторх үйлдэл хийх дуудлага өгөхөд ашиглагддаг. Энэ нийтлэлд би орлуулагчдын текстийг загварчлах хэд хэдэн сонголтууд, мөн тэдгээрийн хөдөлгөөнт дүрсний сонголтуудыг тайлбарлах болно.

Тиймээс, манай орлуулагчийн текстийн өнгийг жишээлбэл, дараах CSS дүрмийн багцыг ашиглан өөрчилж болно.

::-webkit-input-placeholder (өнгө : #c0392b ;) ::-moz-placeholder (өнгө: #c0392b ;) /* Firefox 19+ */ :-moz-placeholder (өнгө: #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder (өнгө: #c0392b ;)

Ийм энгийн шинж чанарыг загварчлах кодын урт нь нийтлэг стандарт байхгүйгээс шалтгаалж байгаа тул хөтөч бүр өөр өөрийн гэсэн байдлаар орлуулагчийн хэв маягийг дэмждэг.

Түүнчлэн, бүгдийг нь дэмждэггүй css шинж чанарууд. Энд яг дэмжигдсэн шинж чанаруудын жагсаалт байна:

фонт (болон холбогдох)
суурь (болон холбогдох)
өнгө
үг хоорондын зай
үсэг хоорондын зай
текст чимэглэл
босоо зэрэгцүүлэх
текст хувиргах
шугамын өндөр
текст догол
текст халих
тунгалаг байдал

Мөн орлуулагчийн текст нь оролтын эсвэл текст талбарын элементийн өргөнийг "өргөтгөх" тохиолдол байдаг (нийтлэг тохиолдол хөдөлгөөнт төхөөрөмжүүд). Үүний зэрэгцээ энэ нь автоматаар үзэмжгүй байдлаар таслагдана.

Текст халих зэрэг CSS шинж чанар: эллипс нь энэ асуудлыг засахад туслах бөгөөд энэ нь орлуулагчийн тайрсан хэсэгт гоо зүйн эллипс нэмэх болно. Загварын хувьд бид дараах байдлаар бичдэг.

оролт [ орлуулагч ] ( текст халих : зуйван ;) оролт ::-moz-орлуулагч (текст халих : зуйван ;) оролт :-moz-орлуулагч (текст халих : зуйван ;) оролт :-ms-орлуулагч ( текст халих: эллипс ;)

Орлуулагчид илүү их гоо зүй нэмэхийн тулд харгалзах элемент нь анхаарал төвлөрүүлэх үед үүнийг нуух эффектийг нэмж болно.

Хөдөлгөөнт дүрс бүхий ийм нуугдах зарим жишээ:

/* анхаарлаа төвлөрүүлэх үед орлуулагчийн ил тод байдлыг жигд өөрчлөх */.input ::-webkit-input-placeholder ( тунгалаг байдал : 1 ; шилжилт : тунгалаг байдал 0.3 сек хялбар ;) . оролт ::-moz-орлуулагч ( тунгалаг байдал : 1 ; шилжилт : тунгалаг байдал 0.3 сек хялбар ;).оролт :-moz орлуулагч (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3 секундын хялбар байдал;). оролт:-ms-оролтын-орлуулагч (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3 секундын хялбар байдал;). оролт (тунгалаг байдал: 0; шилжилт: тунгалаг байдал 0.3 секундын хялбар байдал; ) .оролт :фокус::-moz-орлуулагч ( тунгалаг байдал : 0 ; шилжилт : тунгалаг байдал 0.3 сек хялбар ;).оролт : фокус:-moz- орлуулагч ( тунгалаг байдал : 0 ; шилжилт : тунгалаг байдал 0.3 сек хялбар ;).оролт : фокус :-ms-input-placeholder ( тунгалаг байдал : 0 ; шилжилт : тунгалаг байдал 0.3 сек хялбар ;) /* анхаарлаа төвлөрүүлэх үед орлуулагчийг баруун тийш шилжүүлэх */.input ::-webkit-input-placeholder (текст догол : 0px ; шилжилт : текстийн догол 0.3 сек хялбар ;) . оролт ::-moz-орлуулагч ( текстийн догол : 0px ; шилжилт : текстийн догол 0.3 сек хялбар ;).оролт:-moz-орлуулагч (текст догол: 0px; шилжилт: текст-догол 0.3 секундын хялбар байдал;).оролт:-ms-оролтын-орлуулагч (текст догол: 0px; шилжилт: текстийн догол 0.3 секундын хялбар байдал. ;).оролт :focus::-webkit-input-placeholder(текст догол : 500px ; шилжилт : текстийн догол 0.3 сек хялбар ;).оролт :фокус ::-moz-орлуулагч (текст догол : 500px ; шилжилт : текстийн догол 0.3 сек хялбар ;).оролт :фокус:- moz-орлуулагч (текст догол : 500px ; шилжилт : текстийн догол 0.3 сек хялбар ;) . оролт : фокус :-ms- оролтын орлуулагч ( текстийн догол : 500 пиксел ; шилжилт : текстийн догол 0.3 секундын хялбар ;) /* анхаарлаа төвлөрүүлэх үед орлуулагчийг доош шилжүүлэх */.input ::-webkit-input-placeholder ( мөрийн өндөр : 20px ; шилжилт : шугамын өндөр 0.5 сек хялбар ;) . оролт ::-moz-орлуулагч ( шугамын өндөр : 20px ; шилжилт : шугамын өндөр 0.5 сек хялбар ;).оролт:-moz-орлуулагч (мөрийн өндөр: 20px; шилжилт: шугамын өндөр 0.5 секундын хялбар байдал;). оролт:-ms-оролтын-орлуулагч (мөрийн өндөр: 20px; шилжилт: шугамын өндөр 0.5 секундын хялбар байдал ;).оролт :focus::-webkit-input-placeholder( шугамын өндөр : 100 пиксел ; шилжилт : шугамын өндөр 0.5 сек хялбар ;). оролт : фокус :: - moz- орлуулагч ( шугамын өндөр : 100 пиксел ; шилжилт : шугамын өндөр 0.5 сек хялбар ;). оролт : фокус: - moz-орлуулагч (мөрийн өндөр: 100px; шилжилт: шугамын өндөр 0.5 сек хялбар;).оролт: фокус:-ms-орлуулагч (мөрийн өндөр: 100px; шилжилт: шугамын өндөр 0.5 сек хялбар;)

Энд дуусгая.

Хэлбэрийг багасгаж, харааны дуу чимээг багасгахын тулд дизайнерууд шошголодог орлуулагч шинж чанараар солигдож, богино хугацааны санах ойн ачааллыг нэмэгдүүлдэг. Харааны бэрхшээлтэй хүмүүст энэ сэжүүрийг уншихад хэцүү байдаг. байрлуулах нь дээр шууд оролтын талбар дээр. Хоосон талбарыг бөглөх шаардлагатай элемент гэж илүү амархан хүлээн зөвшөөрдөг.

Муу

Сайн байна

Загвар: орлуулагчийн өнгийг CSS өөрчлөх

CSS орлуулагчийн тусламжтайгаар оролтын талбарын хэв маягийг өөрчлөх

Муу

Орлуулагчийн эффект

Placeholder атрибут нь зөвхөн зориулалтын дагуу ажилладаг Тэгээд , бусад шошго нь контент засах боломжтой шинж чанартай байсан ч гэсэн.</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=="анхаарлаа төвлөрүүлэх ="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>Сайн байна уу, өнөөдөр та орлуулагч ашиглан хэнийг ч гайхшруулахгүй. Орлуулагч нь текст оруулахад алга болдог оролтын дотор жишээ бүхий түр зуурын текст юм. Бид өнөөдөр орлуулагчийн CSS хэв маягийг бичихийг хичээх болно.</p> <h2>Даалгавар: орлуулагчийн хувьд өөрийн CSS хэв маягийг бий болго</h2> <p>Бид оролтонд орлуулагч ашигладаг загварлаг вэбсайттай гэж бодъё. Бид орлуулагчийн саарал, уйтгартай текстийн хэв маягийг сайтын ерөнхий хэв маягтай нийцүүлэх хэрэгтэй. Үүнд хэрхэн хүрэх вэ? Энэ нь бүх хөтөч дээр ажиллахгүй байгааг би шууд хэлье. Тодруулбал, энэ нь IE-ийн 9 ба түүнээс доош хувилбаруудад огт ажиллахгүй бөгөөд 10-аас доошгүй хувилбаруудад энэ нь маш хэцүү хэвээр байна. Firefox болон webkit хөтчүүд нь өөр асуудал юм.</p> <h2>Шийдэл: орлуулагчийн css загвар</h2> <p>Тэгэхээр бид зорилт тавиад, яаж шийдэх гэж байна?</p> <p>Эхлээд туршилтын талбайг бий болгоё:</p><p> <input type="text" name="input" placeholder="Манай орлуулагчийн текст" value="" /> </p><p>Дууслаа, одоо хэв маягаар юу хийж болохыг харцгаая: webkit болон mozilla-д тусгай хэв маягийг орлуулагчид оноох боломжийг олгодог өөр өөр тохируулагчууд байдаг: ::-webkit-input-placeholder болон:-moz-placeholder. Тэдгээрийг хэрхэн ашиглахыг харцгаая:</p> <p>Оролтын хэв маяг болон доторх текстийг тайлбарлая (жишээнд тодосгогч цэнхэр өнгө):</p><p>Оруулах (өргөн: 250px; өнгө: цэнхэр; үсгийн жин: хэвийн; үсгийн маяг: хэвийн; )</p><p>Одоо Webkit хөтчүүдэд (Chrome, Safari, Opera) зориулсан энэ оролтын орлуулагчийн текстийн тусгай хэв маягийг бичье:</p><p>Input::-webkit-input-placeholder(өнгө: улаан; үсгийн хэв маяг: налуу; үсгийн жин: тод; )</p><p>Орлуулагчийн бичвэрийг улаан, тод налуу болгоё. Ганц хоёр цэгээр тусгаарлагдсан бусад CSS псевдо ангиудаас ялгаатай нь webkit дэх орлуулагчийн хэв маяг нь давхар цэгээр тусгаарлагддаг гэдгийг анхаарна уу.</p> <p>Одоо яг ижил хэв маягт зориулж бичье <a href="https://ermake.ru/mn/kak-otkryt-panel-instrumentov-v-mozile-kak-ubrat-i-kak-vernut/">Mozilla Firefox</a>хөтөч:</p><p>Оруулах:-moz-орлуулагч(өнгө: улаан; үсгийн хэв маяг: налуу; үсгийн жин: тод; )</p><p>Бэлэн. Орлуулагчийн CSS загвар, мэдээжийн хэрэг та өөрийн загварт илүү тохирохыг бичиж болно. Ажлын демо-г эндээс үзэх боломжтой</p> <p>Орлуулагч шинж чанар нь хоосон оролт болон текст талбайн элементүүдийн доторх үйлдэл хийх дуудлагад ашиглагддаг. Энэ нийтлэлд бид орлуулагчийн текстийг загварчлах боломжууд, түүнчлэн үүнийг илүү тохиромжтой, ажиллагаатай болгох зарим заль мэхийг авч үзэх болно.</p> <p>За ингээд орлуулагч гэж юу байдгийг мэдэхгүй хүмүүст зориулсан жишээгээр эхэлье.</p> <h4>html</h4> <input type="text" placeholder="Энд мессеж үлдээгээрэй"> <p>Орлуулагчийн хэв маягийг дараах css дүрмийн багцыг ашиглан өөрчилж болно.</p> <h4>css</h4>::-webkit-input-placeholder (өнгө:#c0392b;) ::-moz-placeholder (өнгө:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (өнгө:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (өнгө:#c0392b;) <p>Энэ аймшигтай харагдаж байна, тийм үү? Энэ нь стандартад байхгүй хэвээр байгаа нь үнэн юм. Хөтөч бүр орлуулагчийн хэв маягийн дэмжлэгийг өөр өөрийн замаар хэрэгжүүлдэг.</p> <p>IE болон хуучин firefox-т (18-аас өмнө) орлуулагчийг псевдо-ангилал гэж үздэг бол шинэ firefox, webkit болон blink-д үүнийг псевдо элемент гэж үздэг.</p> <p>Юу болсныг харцгаая:</p> <p>Бүх боломжит CSS шинж чанаруудыг дэмждэггүй гэдгийг хэлэх ёстой. Олонхи <a href="https://ermake.ru/mn/kak-nastroit-turbo-rezhim-v-yandekse-chto-takoe-rezhim-turbo-v-sovremennyh/">орчин үеийн хөтөч</a>өөрчлөх боломжийг танд олгоно:</p> <ul><li>фонт (болон холбогдох шинж чанарууд)</li> <li>суурь (болон холбогдох шинж чанарууд)</li> <li>өнгө</li> <li>үг хоорондын зай</li> <li>үсэг хоорондын зай</li> <li>текст чимэглэл</li> <li>босоо зэрэгцүүлэх</li> <li>текст хувиргах</li> <li>шугамын өндөр</li> <li>текст догол</li> <li>текст халих</li> <li>тунгалаг байдал</li> </ul><h2>Хэрэв орлуулагч тохирохгүй байвал яах вэ?</h2> <p>Заримдаа текст оруулах талбарууд нь бүдүүвчийн онцлогоос шалтгаалан өргөн нь багасдаг, ялангуяа дээр <a href="https://ermake.ru/mn/chto-takoe-gadzhety-i-devaisy-chto-takoe-devais-v-mobilnoi-tehnike-devaisy/">хөдөлгөөнт төхөөрөмжүүд</a>. Энэ тохиолдолд орлуулагчийн урт текст нь үзэмжгүй таслагдах болно. Үүнээс урьдчилан сэргийлэхийн тулд та text-overflow: ellipsis ашиглаж болно. Энэ синтакс нь бүх шинэ хөтөч дээр ажиллах болно.</p> <h4>css</h4>оролт (текст халих: зуйван;) оролт::-moz-орлуулагч (текст-халих: зуйван;) оролт:-moz-орлуулагч (текст-халих: зуйван;) оролт:-ms-оролтын-орлуулагч (текст халих) :зуурмаг;) <h2>Фокус дээр орлуулагчийг хэрхэн нуух вэ?</h2> <p>Орлуулагчийг нуух нь янз бүрийн аргаар явагддаг.</p> <ol><li>оролтоор фокус хүлээн авах үед зарим хөтөч дээр</li> <li>бусад хөтөч дээр дор хаяж нэг тэмдэгт оруулсан бол</li> </ol><p>Би эхний сонголтод илүү дуртай. Орлуулагчийг дэмждэг бүх хөтөч дээр энэ үйлдлийг тохируулахын тулд бид дараах CSS дүрмийг тодорхойлно.</p> <h4>css</h4>:focus::-webkit-input-орлуулагч (өнгө: ил тод) :focus::-moz-орлуулагч (өнгө: ил тод) :focus:-moz-орлуулагч (өнгө: ил тод) :focus:-ms-input-орлуулагч ( өнгө: ил тод) <h2>Орлуулагчийг сайхан нууж байна</h2> <p>Та мөн орлуулагчийг харуулах, нуух шилжилтийг нэмж болно:</p> <h4>css</h4>/* анхаарлаа төвлөрүүлэх үед орлуулагчийн ил тод байдлыг жигд өөрчлөх */ .input1::-webkit-input-placeholder (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3 секундын хялбар байдал;) .input1::-moz-орлуулагч (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3s ease;).input1:-moz-placeholder (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3s ease;).input1:-ms-input-орлуулагч (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3s хялбар;).input1 : фокус::-webkit-input-орлуулагч (тунгалаг байдал: 0; шилжилт: тунгалаг байдал 0.3 секундын хялбар байдал;).input1: фокус::-moz-орлуулагч (тунгалаг байдал: 0; шилжилт: тунгалаг байдал 0.3 секундын хялбар байдал;).input1: фокус : -moz-орлуулагч (тунгалаг байдал: 0; шилжилт: тунгалаг байдал 0.3 секундын хялбар байдал;) .input1: фокус:-ms-оролтын орлуулагч (тунгалаг байдал: 0; шилжилт: тунгалаг байдал 0.3 секундын хялбар байдал;) /* үед орлуулагчийг баруун тийш шилжүүлнэ. фокус*/ .input2::-webkit-input-орлуулагч (текст догол: 0px; шилжилт: текстийн догол 0.3 секундын хялбар байдал;) .input2::-moz-орлуулагч (текст догол: 0px; шилжилт: текстийн догол 0.3s ease;) .input2:-moz-placeholder (текст догол: 0px; шилжилт: текстийн догол 0.3s ease;).input2:-ms-input-орлуулагч (текст догол: 0px; шилжилт: текстийн догол 0.3 сек хялбар;).input2: фокус::-webkit-оролтын орлуулагч (текст догол: 500px; шилжилт: текстийн догол 0.3 сек хялбар;).input2: фокус::-moz-орлуулагч ( текстийн догол: 500px; шилжилт: текстийн догол 0.3s хялбар;) .input2:focus:-moz-орлуулагч (текст догол: 500px; шилжилт: текстийн догол 0.3s хялбар;).input2: фокус:-ms- оролтын орлуулагч (текстийн догол: 500px; шилжилт: текстийн догол 0.3 секундын хялбар байдал;) /* анхаарлаа төвлөрүүлэх үед орлуулагчийг доош шилжүүлэх */ .input3::-webkit-input-орлуулагч (мөрийн өндөр: 20px; шилжилт: мөр -өндөр 0.5 сек хялбар;).input3::-moz-орлуулагч (шугамын өндөр: 20px; шилжилт: шугамын өндөр 0.5 сек хялбар;).input3:-moz-орлуулагч (шугамын өндөр: 20px; шилжилт: мөр - өндөр 0.5с хялбар;).оролт3:-ms-оролтын орлуулагч (шугамын өндөр: 20px; шилжилт: шугамын өндөр 0.5 сек хялбар;).оролт3: фокус::-webkit-оролтын-орлуулагч (мөрийн өндөр: 100px шилжилт: шугамын өндөр 0.5 секундын хялбар байдал;).input3:фокус::-moz-орлуулагч (шугамын өндөр: 100px; шилжилт: шугамын өндөр 0.5с хялбар;).input3: фокус:-moz-орлуулагч (мөр - өндөр: 100px; шилжилт: шугамын өндөр 0.5 сек хялбар;) .input3: фокус:-ms-оролтын-орлуулагч (шугамын өндөр: 100px; шилжилт: шугамын өндөр 0.5 сек хялбар;) <p>Энэ нь танд хэрэг болно гэж найдаж байна. Сэтгэгдэл, санал хүсэлтээ коммент хэсэгт бичээрэй.</p> <p>Placeholder нь талбарын нэрийг харуулах үүрэгтэй псевдо анги эсвэл псевдо элемент юм. Үндсэндээ энэ бол та үг оруулах шошго (энгийн үүднээс ингэж нэрлэе) бөгөөд хэрэглэгч үүнийг дотор нь хардаг. Маягтын талбар бүрийн зарим төрлийн зөвлөмж эсвэл нэр.</p><p>Хөтөч бүр энэ шошгыг өөр өөрөөр зохицуулдаг бөгөөд загвар нь маш их зүйлийг хүсдэг. Анхдагч хэв маягийг өөрчлөхийн тулд загварын файлд хэд хэдэн мөр код нэмнэ үү. Ямар ч төвөгтэй зүйл байхгүй. <br>Гэсэн хэдий ч бид бүгдийг өөрчилж чадахгүй гэдгийг анхаарч үзэх хэрэгтэй.</p><h2>Төрөл бүрийн хэв маягийн дотроос энэ тохиолдолд дараахь зүйлс бидэнд бэлэн байна.</h2><ul><li>font-weight — текстийн жинг тохируулах</li><li>font-size — текстийн хэмжээг сонгоно</li><li>font-family - фонт сонгох</li><li>дэвсгэр - дэвсгэр болон дэвсгэр зураг</li><li>өнгө - текстийн өнгө</li><li>үг хоорондын зай - үг хоорондын зайг тохируулах</li><li>үсэг хоорондын зай — үсэг хоорондын зайг тохируулах</li><li>текст-чимэглэл - үгийн чимэглэлийн сонголт. Доор нь зурсан, зурсан гэх мэт.</li><li>vertical-align — босоо байрлалыг тохируулах</li><li>text-transform - текстийн өөрчлөлтийг сонгоно. Бүгдийг том жижиг үсгээр бичнэ.</li><li>line-height — мөр хоорондын зай</li><li>text-indent - догол мөрний эхний мөрөнд зүүн догол мөрийг тогтооно</li><li>text-overflow - блокт тохирохгүй текстийг харуулах сонголт (нуух эсвэл тайрч, эллипс нэмэх)</li><li>тунгалаг байдал — элементийн ил тод байдлыг сонгоно</li> </ul><p>Одоо бид боломжит хэв маягийг ойлгосон тул дизайн хийж эхлэх боломжтой, үүний тулд бид дараах хэв маягийг нэмэх болно.</p><p>::-webkit-input-placeholder (өнгө: #2cb04d; ) <br>::-moz-орлуулагч (өнгө: #2cb04d; )/* Firefox 19+ */ <br>:-moz-орлуулагч (өнгө: #2cb04d; ) /*Firefox 18- */ <br>:-ms-input-placeholder (өнгө: #2cb04d; )</p><p>Эдгээр мөрүүдийг нэмсний дараа маягтын талбар доторх нэрсийн өнгө өөрчлөгдөх ба хөтөч бүрт ижил байх болно. Та энд нэмэлт загвар нэмж болно. <br>Жишээлбэл, энэ хэв маяг</p><p>::-webkit-input-placeholder (өнгө: #2cb04d; үсгийн хэмжээ: 1.5em; үсгийн жин: 600;) <br>::-moz-орлуулагч (өнгө:#2cb04d; үсгийн хэмжээ:1.5em; үсгийн жин:600;) /*Firefox 19+*/ <br>:-moz-орлуулагч (өнгө:#2cb04d; үсгийн хэмжээ:1.5em; үсгийн жин:600;) /*Firefox 18-*/ <br>:-ms-input-placeholder (өнгө: #2cb04d; үсгийн хэмжээ: 1.5em; үсгийн жин: 600;)</p><p>Өнгө нэмнэ <a href="https://ermake.ru/mn/kak-sdelat-izobrazhenie-bolshe-po-razmeru-uvelichenie-vesa/">том хэмжээтэй</a>болон текстийн дундаж жин. Хэрэв та нэмэлт өмч нэмбэл - <br>text-overflow:ellipsis дараа нь текстийг тухайн талбарт тохируулан тайрч, төгсгөлд нь эллипс нэмнэ.</p><p>Өөр нэг сонирхолтой шинж чанар бий: css (загвар) дээр хөдөлгөөнт дүрс гарч ирсний ачаар та курсорыг талбарт байрлуулахдаа үзэсгэлэнтэй нуугдлыг тохируулах боломжтой. Өмнө нь үүнийг js (скрипт) ашиглан хийдэг байсан.</p><p>Input::-webkit-input-placeholder (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3 сек хялбар;) <br>.input::-moz-орлуулагч (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3 сек хялбар;) <br>.input:-moz-орлуулагч (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3 сек хялбар;) <br>.input:-ms-input-placeholder (тунгалаг байдал: 1; шилжилт: тунгалаг байдал 0.3 сек хялбар;) <br>.input:focus::-webkit-input-placeholder (тунгалаг байдал: 0; шилжилт: тунгалаг байдал 0.3 сек хялбар;) <br>.input:focus::-moz-орлуулагч (тунгалаг байдал: 0; шилжилт: тунгалаг байдал 0.3 сек хялбар;) <br>.input:focus:-moz-placeholder (тунгалаг байдал: 0; шилжилт: тунгалаг байдал 0.3 сек хялбар;) <br>.input:focus:-ms-input-placeholder (тунгалаг байдал: 0; шилжилт: тунгалаг байдал 0.3s хялбар;)</p><p>Ийм хэв маягийг нэмснээр курсорыг талбарт байрлуулах үед орлуулагч нь жигд алга болно <br>.input нь маягтын элементийн анги юм. Загвар ажиллахын тулд маягтын талбарын код дараах байдалтай байх ёстой.</p><p><input type="text" class="input" placeholder="талбайн нэр"></p><p>Эсвэл та элементийн ангийг ашиглаж болно. Ингэснээр та маягт бүрт өөр өөр хэв маягийг тохируулж болно.</p><p><!-- первым указываем класс контейнера, тег формы и тег вставки поля --><br>.contacts-form form input::-webkit-input-placeholder (өнгө: #2cb04d; үсгийн хэмжээ: 1.5em; үсгийн жин: 600;) <br>.contacts-form form input::-moz-placeholder (өнгө: #2cb04d; фонтын хэмжээ: 1.5em; үсгийн жин: 600;)/*Firefox 19+*/ <br>.contacts-form form input:-moz-placeholder (өнгө: #2cb04d; font-size: 1.5em; font-weight: 600;)/*Firefox 18-*/ <br>.contacts-form form input:-ms-input-placeholder (өнгө: #2cb04d; үсгийн хэмжээ: 1.5em; үсгийн жин: 600;)</p><p>Эдгээр энгийн аргуудын тусламжтайгаар та үнэхээр үзэсгэлэнтэй хэлбэрийн загварыг бий болгож чадна.</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> </article> </div> <div class="sidebar"> <section class="widget"> <div class="textwidget"> </div> </section> </div> <div class="sidebar"> <section class="widget"><h3 class="widget-title">Редакторын сонголт</h3><ul class="rfpw-dropdown-post"> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/kak-ubrat-kompyutera-istoriyu-prosmotrov-istoriya-brauzera-kak-posmotret/"><img style="width: 30%; border-radius: 0;" src="/uploads/318472be0eb2d0a8c6bd7cd6b0782fc1.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/kak-ubrat-kompyutera-istoriyu-prosmotrov-istoriya-brauzera-kak-posmotret/">Хөтчийн түүх (хөтчийн түүхийг хэрхэн харах, устгах, сэргээх)</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Сайн байна уу, эрхэм зочид! Хэн нэгний компьютер дээр интернет дээр ажиллахдаа бид өөрийн мэдэлгүй ул мөр үлдээдэг. ДАХЬ...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/chto-delat-esli-pole-obekta-ne-obnaruzheno-chto-delat-esli-pole-obekta-ne/"><img style="width: 30%; border-radius: 0;" src="/uploads/0ff2ca9e01bacd4063a818672dfa2da2.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/chto-delat-esli-pole-obekta-ne-obnaruzheno-chto-delat-esli-pole-obekta-ne/">“Объектийн талбар илрээгүй” тохиолдолд яах вэ, объектын талбар илрээгүй, үйлдвэрлэлийн үйл ажиллагаа явагдаж байна</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">1С-ийн хэрэглэгчдэд тулгардаг асуудал бол "Алдаа: Объектийн талбар олдсонгүй" гэдэг нь ихэвчлэн...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/probit-po-nomeru-telefona-vladelca-kak-uznat-gde-nahoditsya-chelovek-po/"><img style="width: 30%; border-radius: 0;" src="/uploads/93701987bbeab63a000d821fce21422a.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/probit-po-nomeru-telefona-vladelca-kak-uznat-gde-nahoditsya-chelovek-po/">Гар утасны дугаараар хүн хаана байгааг яаж мэдэх вэ?</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Амьдралын зарим нөхцөл байдал нь хүнийг олох, түүний байршлыг тогтоох эсвэл овог нэр, нэрийг олж мэдэхийг шаарддаг ...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/karta-gugl-sputnik-podrobnoe-opisanie-servisa-trehmernye/"><img style="width: 30%; border-radius: 0;" src="/uploads/4c5ec417af15f4923ac9ffe5adb9bde2.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/karta-gugl-sputnik-podrobnoe-opisanie-servisa-trehmernye/">Google газрын зураг дээрх 3D газрын зураг</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Олон сансрын нисгэгчдийн үзэж байгаагаар манай гарагийг гаднаас нь харах шиг сайхан зүйл байхгүй. Дэлхий том юм шиг харагдах үед...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/kak-nastroit-monitor-dlya-pravilnoi-cvetoperedachi-s-pomoshchyu-po/"><img style="width: 30%; border-radius: 0;" src="/uploads/d37aeee8722a180940b4ee4fe58ba9bb.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/kak-nastroit-monitor-dlya-pravilnoi-cvetoperedachi-s-pomoshchyu-po/">Заавар: Зөөврийн компьютерын дэлгэцийн тохируулга хийх - өнгөний дамжуулалтыг тохируулах</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Зөөврийн компьютер дээрх өнгөний схемийг хэрхэн зөв тохируулах вэ? Мастераас хариу: За, та эцэст нь зөөврийн компьютер худалдаж авлаа! Ийм...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/ploho-rabotaet-sensornyi-ekran-chto-delat-esli-sensor-vashego-gadzheta-ne/"><img style="width: 30%; border-radius: 0;" src="/uploads/dfd76163a4eae7ae9235b963b4cb2d97.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/ploho-rabotaet-sensornyi-ekran-chto-delat-esli-sensor-vashego-gadzheta-ne/">Таны гаджетын мэдрэгч ажиллахгүй бол яах вэ?</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Орчин үеийн таблетуудыг голчлон мэдрэгчтэй дэлгэцээр удирддаг. Хэрэв таны таблет гэнэт ажиллахаа больсон бол...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/pri-vklyuchenii-kompyutera-postoyanno-zapuskaetsya-bios-noutbuk-pri/"><img style="width: 30%; border-radius: 0;" src="/uploads/caa8bac5259bd1cae8d91ab58aa3d711.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/pri-vklyuchenii-kompyutera-postoyanno-zapuskaetsya-bios-noutbuk-pri/">Зөөврийн компьютер асаалттай үед BIOS-д ордог.</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Өнөөдөр бид дараахь зүйлийг авч үзэх болно: Windows үйлдлийн системийн аль ч хувилбарын эзэмшигчид ...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/kak-pereustanovit-windows-poshagovaya-instrukciya-kak-pereustanovit/"><img style="width: 30%; border-radius: 0;" src="/uploads/2046ab0e80e33c46398798796860ac54.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/kak-pereustanovit-windows-poshagovaya-instrukciya-kak-pereustanovit/">Windows-ийг хэрхэн дахин суулгах вэ: алхам алхмаар зааварчилгаа Windows 7-г компьютер дээр дискнээс суулгах</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Энэ үйлдлийн системийг суулгах хэд хэдэн сонголт байдаг бөгөөд тэдгээр нь бүгдээрээ...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/mdf-chem-otkryt-chem-otkryvat-faily-mdf-i-kak-s-nimi-rabotat-podrobnaya/"><img style="width: 30%; border-radius: 0;" src="/uploads/bda9c17f55759c913b4eb7949ae8e93c.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/mdf-chem-otkryt-chem-otkryvat-faily-mdf-i-kak-s-nimi-rabotat-podrobnaya/">MDF файлуудыг хэрхэн нээх, тэдэнтэй хэрхэн ажиллах талаар: дэлгэрэнгүй заавар</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">MDF файлыг хэрхэн нээх вэ? Энэ асуултын хариултыг олохын өмнө энэ нь ямар төрлийн формат болохыг ойлгох хэрэгтэй. Асаалттай...</div> </li> <li class="rfpw-dropdown-content"> <div class="rfpw-image-link"><a href="https://ermake.ru/mn/raskrutka-aska-besplatnaya-nakrutka-laikov-v-servise-ask-fm-kak/"><img style="width: 30%; border-radius: 0;" src="/uploads/ef662912cb10f5d1986cfe9f8c1aa116.jpg" loading=lazy loading=lazy></a></div> <div style="width:65%; top: 0px;" class="rfpw-dropdown-text"> <a href="https://ermake.ru/mn/raskrutka-aska-besplatnaya-nakrutka-laikov-v-servise-ask-fm-kak/">Ask үйлчилгээнд дуртай тоог үнэ төлбөргүй нэмэгдүүлэх</a> <div class="rfpw-date-time"></div> </div> <div style="border:1px solid black;" class="rfpw-dropdown-excerpt">Ask fm-ийн сурталчилгаа улам бүр явагдаж байна. Энэ нь залуучуудын харилцаа холбоо,...</div> </li> </ul></section> </div> <div class="sidebar"> <section class="widget"> <div class="textwidget"> </div> </section> <section class="widget"> <div class="textwidget"> </div> </section> </div> </div> <div id="copy"> <div class="container"> <div id="logo" class="fl"> <a href="https://ermake.ru/mn/"></a> </div> <nav id="nav" class="fl"> <div class="menu-footer-container"><ul id="menu-footer" class="footer-nav"> <li class="menu-item type-custom object-custom "><a href="">Сайтын мэдээлэл</a></li> <li class="menu-item type-custom object-custom "><a href="https://ermake.ru/mn/feedback/">Санал хүсэлт</a></li> <li class="menu-item type-post_type object-page "><a href="https://ermake.ru/mn/sitemap.xml">Сайтын газрын зураг</a></li> </ul></div> </nav> <div class="clearfix"></div> <p>© 2024 ermake.ru -- Компьютер засварын тухай - Мэдээллийн портал <span class="counters"> </span> </p> </div> </div> <script type='text/javascript' src='https://ermake.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.9'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "visibility_show":"\u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c","visibility_hide":"\u0441\u043a\u0440\u044b\u0442\u044c","width":"100%"} ; /* ]]> */ </script> <script type='text/javascript' src='https://ermake.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://ermake.ru/wp-content/themes/whattech/js/init.js?ver=4.8.4'></script> <script type='text/javascript' src='https://ermake.ru/wp-content/themes/whattech/js/jquery.flexslider.js?ver=4.8.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.4'></script> </body> </html>