பிளேஸ்ஹோல்டர்கள், உள்ளீட்டிற்குள் அடிக்கடி சாம்பல் நிறத்தில் இருக்கும் உரை கூறுகள், ஸ்டைலுக்கு வலியை ஏற்படுத்தும். அதிர்ஷ்டவசமாக, உங்கள் உள்ளீட்டின் ப்ளேஸ்ஹோல்டர் உரையை நீங்கள் விரும்பும் வண்ணம் மற்றும் ஒளிபுகாநிலையில் வடிவமைக்க ஒரு குறுகிய ஆனால் பயனுள்ள CSS தீர்வை நாங்கள் பெற்றுள்ளோம். குறியீட்டைப் படிக்கவும்.

ஒதுக்கிட உரை நிறத்தை மாற்றுகிறது

ஒரு எளிய உள்ளீடு மற்றும் சில ஒதுக்கிட உரையுடன் தொடங்குவோம், இந்த உதாரணத்திற்கு "தேடல்" என்ற வார்த்தையைப் பயன்படுத்துவோம், ஆனால் நீங்கள் விரும்பும் எதையும் பயன்படுத்தலாம். அடிப்படை HTML கீழே உள்ளது:

HTML

உள்ளீடு (மற்றும் textarea) ஒதுக்கிட உரை இயல்புநிலையாக வெளிர் சாம்பல் நிறத்தில் இருக்கும், இருப்பினும், CSS இன் சில வரிகள் மூலம் அதை மாற்றலாம். இங்கே நாம் ஒரு HTML வண்ணப் பெயரைப் பயன்படுத்தி உள்ளீட்டு உரையை சிவப்பு நிறமாக்குவோம், ஆனால் எந்த வண்ண முறையும் போதுமானதாக இருக்கும் (HEX, RGB, HSL).

CSS

::-webkit-input-placeholder ( /* Chrome */ color: red; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; ) ::-moz-placeholder ( /* Firefox 19 + */ நிறம்: சிவப்பு; ஒளிபுகாநிலை: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ நிறம்: சிவப்பு; ஒளிபுகாநிலை: 1; )

முடிந்தவரை பல உலாவிகளை ஆதரிக்க, வெவ்வேறு விற்பனையாளர் முன்னொட்டுகளைச் சேர்ப்பது முக்கியம் என்பதை நினைவில் கொள்ளவும். Firefox இன் உள்ளீட்டு ஒதுக்கிட உரை மட்டும் சிறிது வெளிப்படைத்தன்மைக்கு இயல்புநிலையாக இருக்கும், எனவே IE அல்லது Chrome இல் ஒளிபுகா பண்புகளை அமைப்பது தேவையற்றது.

ஒதுக்கிட கவனம் உரை வண்ணத்தை மாற்றுகிறது

சரி, ப்ளேஸ்ஹோல்டர் உரையின் நிறத்தை வெற்றிகரமாக சிவப்பு நிறமாக மாற்றியுள்ளோம், ஆனால் ஒரு பயனர் நம் உள்ளீட்டிற்குள் கிளிக் செய்யும் போது ஏதேனும் நடந்தால் நன்றாக இருக்கும். அதே விற்பனையாளரின் முன்னொட்டு CSS பண்புகளைப் பயன்படுத்தி, உள்ளீட்டு ஒதுக்கிட உரையின் ஒளிபுகாநிலையை மாற்றலாம். கவனம் மீது.

CSS

உள்ளீடு (அவுட்லைன்: எதுவுமில்லை; திணிப்பு: 12px; எல்லை-ஆரம்: 3px; பார்டர்: 1px திட கருப்பு; ) ::-வெப்கிட்-இன்புட்-பிளேஸ்ஹோல்டர் ( /* குரோம் */ நிறம்: சிவப்பு; மாற்றம்: ஒளிபுகாநிலை 250 எம்எஸ் எளிதாக-இன்-அவுட் ; ) :focus::-webkit-input-placeholder (opacity: 0.5; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; transition: opacity 250ms Ease-in-out; ) :focus :-ms-input-placeholder (opacity: 0.5; ) ::-moz-placeholder ( /* Firefox 19+ */ color: red; opacity: 1; transition: opacity 250ms Ease-in-out; ) :focus:: -moz-placeholder (opacity: 0.5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ color: red; opacity: 1; transition: opacity 250ms Ease-in-out; ) :focus:-moz-placeholder (ஒளிபுகாநிலை: 0.5;)

மேலே உள்ள எடுத்துக்காட்டில், உள்ளீட்டிலேயே சில அடிப்படை பாணிகளை நாங்கள் எறிந்துள்ளோம், மேலும் அனுபவத்தை இன்னும் கொஞ்சம் இனிமையானதாக மாற்ற ஒளிபுகாநிலையில் மாற்றத்தைச் சேர்த்துள்ளோம். டெமோவைப் பார்த்து மற்ற CSS பண்புகள் மற்றும் மாற்றங்களைச் சோதித்துப் பாருங்கள்.

ப்ளேஸ்ஹோல்டர் என்பது உள்ளீட்டு புலத்தின் ஒரு உறுப்பு ஆகும், அதில் ஒரு உதவிக்குறிப்பை வைக்கலாம். பயனர் தரவை உள்ளிடத் தொடங்கும் போது, ​​குறுக்கிடாதபடி துணை உரை மறைந்துவிடும். ஒவ்வொரு உலாவிக்கும் இந்த உறுப்பு எவ்வாறு காட்டப்பட வேண்டும் என்பதில் அதன் சொந்த கருத்து உள்ளது, மேலும் சில நேரங்களில் இயல்புநிலை பாணிகள் முழு வடிவமைப்பையும் உடைக்கும். அவற்றை நிர்வகிக்க, நீங்கள் ஒரு சிறப்பு CSS ஒதுக்கிட விதியைப் பயன்படுத்த வேண்டும்.

இடம் எங்கே?

சிக்கல் என்னவென்றால், உள்ளீட்டு புலத்தின் உதவிக்குறிப்பு நிழல் DOM இல் உறுதியாக மறைக்கப்பட்டுள்ளது மற்றும் அதை அடைவது அவ்வளவு எளிதானது அல்ல. இதற்கு, ஒரு சிறப்பு தரமற்ற :: ப்ளாஸ்ஹோல்டர் பயன்படுத்தப்படுகிறது. அதன் உதவியுடன் உதவிக்குறிப்பின் பண்புகளை நீங்கள் நிர்வகிக்கலாம்.

CSS இல் ஒரு ஒதுக்கிடத்தை உருவாக்குவது இதுபோல் தெரிகிறது:

உள்ளீடு:: ஒதுக்கிட (நிறம்: சிவப்பு; ஒளிபுகாநிலை: 1; எழுத்துரு பாணி: சாய்வு; )

உலாவி ஆதரவு

CSS ஒதுக்கிடப் போலி உறுப்பு அனைத்து நவீன உலாவிகளாலும் சிறப்பாகக் கையாளப்படுகிறது, மேலும் பழைய உலாவிகளை ஆதரிக்க பின்வரும் முன்னொட்டுகளைப் பயன்படுத்தலாம்:

• ::-webkit-input-placeholder - webkit உலாவிகளுக்கு (Safari, Chrome, Opera);
• ::-moz-placeholder - பதிப்பு 19க்கு மேல் உள்ள Firefox உலாவிகளுக்கு;
• :-moz-placeholder - பழைய Firefoxக்கு;
• :-ms-input-placeholder - க்கு இன்டர்நெட் எக்ஸ்புளோரர்மேலே உள்ள பதிப்பு 10.

நீங்கள் பார்க்க முடியும் என, பழைய Mozilla உலாவிகள், அதே போல் IE, ஒதுக்கிடத்தை CSS போலி-வகுப்பாகக் கருதுங்கள், போலி உறுப்பு அல்ல. அவர்களுடன் வாதிட வேண்டாம், உள்ளீட்டு புலத்தை வடிவமைக்கும்போது இந்த அம்சத்தை கணக்கில் எடுத்துக்கொள்வோம்.

ஸ்டைலிங் விருப்பங்கள்

CSS இல் ஒதுக்கிட போலி உறுப்புக்கான பின்வரும் விருப்பங்களை நீங்கள் அமைக்கலாம்:

• பின்னணி - உதவிக்குறிப்பு தொகுதி குழு முழு உள்ளீட்டு புலத்திற்கும் பொருந்தும். நீங்கள் வண்ணத்தை (பின்னணி-வண்ணம்) மட்டுமல்ல, படத்தையும் (பின்னணி-படம்) அமைக்கலாம்.
• உரை நிறம் - நிறம்;
• வெளிப்படைத்தன்மை - ஒளிபுகாநிலை;
• அடிக்கோடிடுதல், மேலெழுதுதல் அல்லது வேலைநிறுத்தம் செய்தல் - உரை-அலங்காரம்;
• வழக்கு - உரை-மாற்றம்;
• உள் உள்தள்ளல்கள் - திணிப்பு. எல்லா உலாவிகளாலும் ஆதரிக்கப்படவில்லை. இன்லைன் கூறுகளைப் போலவே, மேல் மற்றும் கீழ் திணிப்பு புறக்கணிக்கப்படுகிறது.
• எழுத்துரு காட்சி - எழுத்துரு குழுவின் பண்புகள், வரி உயரம் மற்றும் பல்வேறு உள்தள்ளல்கள் (உரை-இன்டென்ட், எழுத்து-இடைவெளி, சொல்-இடைவெளி);
• ஒரு வரியில் செங்குத்து சீரமைப்பு - செங்குத்து-சீரமைப்பு;
• கொள்கலன் நிரம்பி வழியும் போது உரையை ஒழுங்கமைத்தல் - உரை-வழிதல்.

.input1::placeholder (background-image: linear-gradient(சுண்ணாம்பு, நீலம்); நிறம்: white; ) .input2::placeholder (உரை-அலங்காரம்: வரி-மூலம்; நிறம்: ஊதா; எழுத்துரு-எடை: தடித்த; ) . input3::placeholder (எழுத்துரு அளவு: 16px; எழுத்து இடைவெளி: 10px; ) .input4:: placeholder (பின்னணி: பழுப்பு; நிறம்: வெள்ளை; உரை-ஓவர்ஃப்ளோ: நீள்வட்டம்; )

கவனத்துடன்

இயல்பாக, உதவிக்குறிப்பு உள்ளீட்டு புலத்தில் குறைந்தது ஒரு எழுத்தையாவது உள்ளிட்டால் மட்டுமே மறைந்துவிடும். ஆனால், களத்தில் கவனம் செலுத்தும் போது, ​​காணாமல் போனதை உடனடியாக செயல்படுத்த, ஒதுக்கிட உங்களை அனுமதிக்கிறது. இதைச் செய்ய, நீங்கள் அதை போலி-வகுப்பு: ஃபோகஸுடன் இணைக்க வேண்டும்.

உள்ளீடு:focus::placeholder (நிறம்: வெளிப்படையானது; )

சில உலாவிகளில், மாற்றம் அறிக்கையைப் பயன்படுத்தி பல ஒதுக்கிட பண்புகளில் மாற்றங்களை உருவாக்க முடியும்.

உள்ளீடு::பிளேஸ்ஹோல்டர் (நிறம்: கருப்பு; மாற்றம்: நிறம் 1கள்; ) உள்ளீடு:ஃபோகஸ்::பிளேஸ்ஹோல்டர் (நிறம்: வெள்ளை; )

IN Google உலாவிஅத்தகைய புலத்தில் கவனம் செலுத்தும் போது Chrome உதவிக்குறிப்பு நிறம் ஒரு நொடிக்குள் சீராக மாறும்.

காலியான உள்ளீட்டு புலங்களில் (குறிச்சொற்கள்) உதவிக்குறிப்புகளை உருவாக்க ஒதுக்கிட பண்புக்கூறு பயன்படுத்தப்படுகிறது மற்றும் ) இந்தக் கட்டுரையில், பிளேஸ்ஹோல்டர்களை ஸ்டைல் ​​​​செய்வதற்கான வழிகளையும், அவற்றை எவ்வாறு பயனர்களுக்கு ஏற்றதாக மாற்றுவது என்பதையும் நான் பார்க்கிறேன்.</p> <p>ஒதுக்கிட என்றால் என்ன, அதை எவ்வாறு பயன்படுத்துவது என்று இதுவரை தெரியாதவர்களுக்கு ஒரு உதாரணத்துடன் ஆரம்பிக்கலாம்:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>இடைமுகங்களை உருவாக்கும் போது, ​​நீங்கள் ஒதுக்கிடங்களின் நடத்தையை கணக்கில் எடுத்துக்கொள்ள வேண்டும். தட்டச்சு தொடங்கியவுடன், ஒதுக்கிட உரை மறைந்துவிடும். அதனால்தான் உள்ளீட்டு புலத்தைப் பற்றிய தகவல்களை அனுப்ப நீங்கள் அவற்றைப் பயன்படுத்தக்கூடாது (அதில் எத்தனை மற்றும் என்ன எழுத்துக்கள் இருக்க வேண்டும்). இந்த நோக்கங்களுக்காக, குறிச்சொல்லைப் பயன்படுத்துவது சிறந்தது <label>அல்லது ஒரு சிறிய குறிப்புடன் ஒரு பத்தி. ப்ளேஸ்ஹோல்டர்களைப் பயன்படுத்துவதன் அம்சங்களைப் பற்றி மேலும் படிக்கலாம்.</p> <h2>ஸ்டைலிசேஷன்</h2> <p>பிளேஸ்ஹோல்டர்களை வடிவமைக்க பின்வரும் விதிகள் பயன்படுத்தப்படுகின்றன:</p>::-webkit-input-placeholder (color: blue; ) ::-moz-placeholder (color: blue; ) /* Firefox 19+ */ :-moz-placeholder (color: blue ; ) /* Firefox 18- * / :-ms-input-placeholder (நிறம்: நீலம்; ) <p>பயங்கரமாக தெரிகிறது, இல்லையா? இதற்கு ஒரு காரணம் உள்ளது - இதுவரை, ஒதுக்கிடங்களுக்கான CSS விதிகள் தரப்படுத்தப்படவில்லை மற்றும் ஒவ்வொரு உலாவியிலும் செயல்படுத்துவது வேறுபட்டது. தேவையான அனைத்து முன்னொட்டுகள் பற்றிய கூடுதல் தகவல்களை கேனியஸில் காணலாம்.</p> <p>நீங்கள் CSS முன்செயலியைப் பயன்படுத்துகிறீர்கள் என்றால், பிளேஸ்ஹோல்டர்களுக்கு ஸ்டைல்களைப் பயன்படுத்துவதற்கு எளிமையான மிக்சினை எழுதுவது உங்களுக்கு மிகவும் வசதியாக இருக்கும். சாஸில் உதாரணம்:</p>@mixin placeholder ( & :- webkit-input-placeholder (@content ; ) & : - moz-placeholder (@content ; ) & : :- moz-placeholder (@content ; ) & : - ms-input-placeholder ( @உள்ளடக்கம் ; ) ) <p>சூழலைப் பொறுத்து, உலகளவில் அல்லது தனிப்பட்ட உறுப்பு அடிப்படையில் பாணிகளைப் பயன்படுத்த மிக்சின் பயன்படுத்தப்படலாம் (சாஸ்மீஸ்டரில் முயற்சிக்கவும்):</p> <span>// உலகளவில் ஒவ்வொரு உள்ளீட்டு புலத்திற்கும்</span>@include ஒதுக்கிட (நிறம்: நீலம்;) <span>// குறிப்பிட்ட உள்ளீட்டு புலங்களுக்கு</span>.உள்ளீடு (@include ஒதுக்கிட (நிறம்: பச்சை;)) <h4>உதாரணமாக</h4> <p>ஒதுக்கிடத்திற்கான நீல உரை (இதை ஒருபோதும் செய்ய வேண்டாம்):</p>.blue-text ::-webkit-input-placeholder ( color : #2e8ece ; ) .blue-text :-moz-placeholder ( color : #2e8ece ; ) .blue-text ::-moz-placeholder ( color : #2e8ece ; ) .blue-text :-ms-input-placeholder (color: #2e8ece ; ) <p> <input type="text" placeholder="இங்கே தட்டச்சு செய்யத் தொடங்குங்கள்" class="demo-css-placeholders-input pl-blue-text"></p> <h2>ஆதரிக்கப்படும் பண்புகள்</h2> <p>ஒவ்வொரு இல்லை <a href="https://whatsappss.ru/ta/security/kontent-zanimaet-70-shiriny-stranicy-parametry-css-width-i-height-dlya.html">CSS சொத்து</a>ஒதுக்கிடங்களுடன் பயன்படுத்தலாம். இங்கே <a href="https://whatsappss.ru/ta/multimedia/polnyi-spisok-stop-slov-dlya-instagram-stop-slova-skachaite-odin-iz-samyh-moshchnyh.html">முழு பட்டியல்</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>அனிமேஷன் யோசனைகள் html5.by வலைப்பதிவைச் சேர்ந்தவை.</p> <p>பின்வரும் அனைத்து எடுத்துக்காட்டுகளும் சாஸ் முன்செயலியைப் பயன்படுத்தி எழுதப்பட்டுள்ளன. ஒவ்வொன்றும் SassMeister க்கான இணைப்புடன் வருகிறது, அங்கு நீங்கள் தொகுக்கப்பட்ட CSS குறியீட்டைக் காணலாம்.</p> <p>பெரும்பாலும், உள்ளீட்டு புலத்தில் கவனம் இருக்கும் போது, ​​அனிமேஷன்களை ஒதுக்கிடங்களுக்குப் பயன்படுத்த விரும்புவீர்கள். இவை அனைத்தும் மிகவும் எளிமையாக செய்யப்படுகின்றன. முன்பு எழுதிய ப்ளேஸ்ஹோல்டர் மிக்சினை சில முறை பயன்படுத்தினால் போதும்:</p>.உள்ளீடு ( @include placeholder ( <span>// இயல்பான நிலைக்கான பாணிகள்</span>) & :ஃபோகஸ் ( @include placeholder ( <span>// ஃபோகஸ் நிகழ்வுக்குப் பிறகு பாங்குகள்</span> } } } <h3>வெளிப்படைத்தன்மையை மாற்றவும்</h3>.உள்ளீடு ( @include ஒதுக்கிட (நிறம்: #aaa; ஒளிபுகாநிலை: 1; மாற்றம்: ஒளிபுகாநிலை 300ms; ) &:focus ( @include placeholder ( ஒளிபுகாநிலை: 0 ; )) ) <p> <input type="text" placeholder="டெமோ: வெளிப்படைத்தன்மையை மாற்றுகிறது" class="demo-css-placeholders-input pl-opacity"></p> <h3>வலது மற்றும் இடதுபுறமாக மாற்றவும்</h3> <p>உள்ளீட்டு புலம் எவ்வளவு அதிகமாக இருக்கிறதோ, அவ்வளவு பெரிய உரை-இன்டென்ட் சொத்தின் மதிப்பு இருக்க வேண்டும். நிலையான உள்ளீட்டு புலத்திற்கு, 500px போதுமானதாக இருக்கும்; பரந்தவற்றிற்கு, நீங்கள் அதை கைமுறையாக தேர்ந்தெடுக்க வேண்டும். அனிமேஷன் வேகமானது உள்ளீட்டு புலத்தின் அகலம் மற்றும் உரை-இன்டென்ட் மதிப்பைப் பொறுத்தது. இடதுபுறமாக மாற்ற, எதிர்மறை மதிப்புகளைப் பயன்படுத்த வேண்டும், எடுத்துக்காட்டாக -500px .</p><p> <input type="text" placeholder="டெமோ: வலதுபுறம் மாற்றவும்" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="டெமோ: இடதுபுறம் மாற்றவும்" class="demo-css-placeholders-input pl-shift-left"></p> <h3>கீழே மாற்ற</h3> <p>முந்தைய உதாரணத்தைப் போலவே, அனிமேஷன் உள்ளீட்டின் அளவைப் பொறுத்தது, ஆனால் இந்த விஷயத்தில், உயரத்திற்கு கவனம் செலுத்துங்கள். பெரும்பாலான உள்ளீட்டு புலங்களுக்கு, தேவையான வரி உயர மதிப்பு 100px க்குள் இருக்கும். துரதிர்ஷ்டவசமாக, சொத்து எதிர்மறை மதிப்புகளை ஏற்காததால், மேல்நோக்கி மாற்ற விளைவை உருவாக்க வரி-உயரம் சொத்தை பயன்படுத்த முடியாது.</p>.input (@include ஒதுக்கிட (உரை-இன்டென்ட்: 0px; மாற்றம்: உரை-இன்டென்ட் 300ms; ) &:focus (@include placeholder (text-indent: 500px; )) ) <p> <input type="text" placeholder="டெமோ: கீழே மாற்றவும்" class="demo-css-placeholders-input pl-shift-down"></p> <h3>ஒன்றாக</h3> <p>ப்ளேஸ்ஹோல்டர்களுக்கு அனிமேஷன் குறியீட்டைப் பயன்படுத்துவதை இனிமையாகவும் வசதியாகவும் மாற்ற, நீங்கள் எந்த முன்செயலிக்கும் மிக்ஸின்களின் சிறிய நூலகத்தை எழுதலாம். நூலகம் இது போல் தெரிகிறது ():</p>@mixin placeholder ( & :- webkit-input-placeholder ( @content ) & : - moz-placeholder ( @content ) & : :- moz-placeholder ( @content ) & : - ms-input-placeholder ( @content ) ) @mixin pl-shift ($side: left, $position: 500px, $duration: 200ms text-indent: if ($side == left , - $position, $position); ) ) @mixin pl-slide-down ($position: 5, $duration: 200ms) ( @include placeholder (line-height: 1 ; மாற்றம்: வரி உயரம் $ கால அளவு ; மாற்றம்: ஒளிபுகாநிலை $காலம்; <p>இது பயன்படுத்த மிகவும் எளிதானது. விரும்பிய மிக்சினை ஏதேனும் உள்ளீட்டு புலத்துடன் இணைத்தால் போதும் அல்லது பக்கத்தில் உள்ள அனைத்து பேஸ்ஹோல்டர்களுக்கும் ஒரு உலகளாவிய விதியை உருவாக்கினால் போதும்:</p> <span>// தனிப்பட்ட கூறுகளுக்கு</span>.pl-shift-right (@include pl-shift (வலது); .pl-fade-out (@include pl-fade-out ;) <span>//மற்ற எல்லாவற்றிற்கும்</span>@include pl-shift (இடது ); <h2>தன்னியக்க முன்னொட்டு</h2> <p>நீங்கள் முன்செயலியைப் பயன்படுத்தாமல், உங்கள் CSS மூலக் கோப்பு, முன்னொட்டுகளின் குழப்பமாக மாறுவதை அனைவரும் விரும்பவில்லை எனில் <a href="https://whatsappss.ru/ta/tools/medlenno-gruzit-stranicy-dolgo-gruzyatsya-stranicy-v-brauzere-vse.html">சாத்தியமான உலாவிகள்</a>, பிறகு Autoprefixer இல் கவனம் செலுத்துங்கள். அவரது உதவியுடன் <a href="https://whatsappss.ru/ta/what-to-do/kakoi-atribut-tega-font-pozvolyaet-ustanovit-cvet-tegi-font-face-size.html">தூய CSS</a>அனைத்து பண்புகளுக்கும் தேவையான அனைத்து முன்னொட்டுகளையும் சேர்ப்பதன் மூலம் அழுக்கு (ஆனால் வேறு கோப்பில்) செய்யலாம். ப்ளாஸ்ஹோல்டர்களுடன் சொருகி வேலை செய்ய, போலி உறுப்பு :: placeholder: ஐப் பயன்படுத்தவும்</p>:: ஒதுக்கிட (நிறம்: ஆரஞ்சு;) . உள்ளீடு:: ஒதுக்கிட (நிறம்: நீலம்;) <p>உங்கள் பாணிகளைப் பாகுபடுத்திய பிறகு, Autoprefixer ஒரு தனி CSS கோப்பை உருவாக்கும், அதில் நீங்கள் குறிப்பிட்ட அனைத்து உலாவிகளுக்கும் தேவையான அனைத்து முன்னொட்டுகளையும் எழுதும்.</p> <h2>அடுத்தது என்ன</h2> <p>நான் மேலே எழுதியது போல, பிளேஸ்ஹோல்டர்களுக்கு ஸ்டைல்களைப் பயன்படுத்துவது தொடர்பான அனைத்தும் இன்னும் தரப்படுத்தப்படவில்லை. இது விரைவில் சரி செய்யப்படும். தேர்வாளர் நிலை 4 விவரக்குறிப்பு ஒரு போலி-வகுப்பைச் சேர்த்தது: ஒதுக்கிட-காட்டப்பட்டது, இது தற்போது இருக்கும் போலி-வகுப்புகள் மற்றும் போலி கூறுகளின் பைத்தியக்காரத்தனமான கலவையை இறுதியாக தரப்படுத்துகிறது. கேனியஸில் ஆதரவை நீங்கள் கண்காணிக்கலாம் (தற்போது எந்த உலாவியிலும் ஆதரிக்கப்படவில்லை).</p> <p>:பிளேஸ்ஹோல்டர்-காட்டப்பட்ட பாணிகளைப் பயன்படுத்துவது மிகவும் எளிதாக இருக்கும்:</p>.உள்ளீடு:பிளேஸ்ஹோல்டர்-காட்டப்பட்டது (நிறம்: நீலம்; ) <p>வணக்கம், இன்று நீங்கள் உள்ளீட்டிற்காக ஒதுக்கிடத்தைப் பயன்படுத்துவதை யாரும் ஆச்சரியப்படுத்த மாட்டீர்கள். ப்ளேஸ்ஹோல்டர் என்பது ஒரு தற்காலிக உரையாகும், இது உள்ளீட்டிற்குள் ஒரு எடுத்துக்காட்டுடன், நீங்கள் உரையை உள்ளிடும்போது மறைந்துவிடும். இன்று ஒதுக்கிடத்திற்கான CSS பாணியை எழுத முயற்சிப்போம்.</p> <h2>பணி: ஒதுக்கிட உங்கள் சொந்த CSS பாணியை உருவாக்கவும்</h2> <p>உள்ளீட்டில் ஒதுக்கிடத்தைப் பயன்படுத்தும் ஸ்டைலான இணையதளம் எங்களிடம் உள்ளது என்று வைத்துக்கொள்வோம். பிளேஸ்ஹோல்டரின் சாம்பல், சலிப்பான உரை நடையை தளத்தின் பொதுவான பாணியுடன் ஒத்துப்போகச் செய்ய வேண்டும். இதை எப்படி அடைய முடியும்? இது இன்னும் எல்லா உலாவிகளிலும் வேலை செய்யாது என்று நான் இப்போதே கூறுவேன். குறிப்பாக, இது IE பதிப்புகள் 9 மற்றும் அதற்குக் கீழே வேலை செய்யாது; 10 மற்றும் அதற்குப் பிறகு இது மிகவும் சிரமத்துடன் வேலை செய்கிறது. பயர்பாக்ஸ் மற்றும் வெப்கிட் உலாவிகள் மற்றொரு விஷயம்.</p> <h2>தீர்வு: ஒதுக்கிடத்திற்கான css பாணி</h2> <p>எனவே, நாங்கள் பணியை அமைத்துள்ளோம், அதை எவ்வாறு தீர்க்கப் போகிறோம்?</p> <p>முதலில், ஒரு சோதனை மைதானத்தை உருவாக்குவோம்:</p><p> <input type="text" name="input" placeholder="எங்கள் ஒதுக்கிடத்தின் உரை" value="" /> </p><p>முடிந்தது, இப்போது ஸ்டைலில் நாம் என்ன செய்ய முடியும் என்பதைப் பார்ப்போம்: வெப்கிட் மற்றும் மொஸில்லா ஆகியவை அவற்றின் சொந்த மாற்றிகளைக் கொண்டுள்ளன, அவை பிளேஸ்ஹோல்டருக்கு ஒரு சிறப்பு பாணியை ஒதுக்க அனுமதிக்கின்றன: ::-webkit-input-placeholder மற்றும்:-moz-placeholder. அவற்றை எவ்வாறு பயன்படுத்துவது என்று பார்ப்போம்:</p> <p>உள்ளீட்டின் பாணியையும் அதில் உள்ள உரையையும் விவரிப்போம் (எடுத்துக்காட்டுக்கு மாறாக நீல நிறம்):</p><p>உள்ளீடு (அகலம்: 250px; நிறம்: நீலம்; எழுத்துரு-எடை: சாதாரணம்; எழுத்துரு பாணி: சாதாரணம்; )</p><p>இப்போது Webkit உலாவிகளுக்கான (Chrome, Safari, Opera) இந்த உள்ளீட்டில் ஒதுக்கிட உரைக்கு ஒரு சிறப்பு பாணியை எழுதுவோம்:</p><p>உள்ளீடு::-வெப்கிட்-இன்புட்-பிளேஸ்ஹோல்டர் (நிறம்: சிவப்பு; எழுத்துரு-பாணி: சாய்வு; எழுத்துரு-எடை: தடிமன்; )</p><p>ஒதுக்கிட உரையை சிவப்பு நிறமாக்குவோம் <a href="https://whatsappss.ru/ta/browser/pervye-tri-vypadayushchih-spiska-v-verhnem-ryadu-prednaznacheny-dlya.html">தடித்த சாய்வு</a>. ஒரு பெருங்குடலால் பிரிக்கப்பட்ட மற்ற CSS போலி-வகுப்புகளைப் போலல்லாமல், வெப்கிட்டில் பிளேஸ்ஹோல்டருக்கான ஸ்டைல் ​​இரட்டைப் பெருங்குடலால் பிரிக்கப்படுகிறது.</p> <p>இப்போது அதே பாணியில் எழுதுவோம் <a href="https://whatsappss.ru/ta/browser/kak-sdelat-stranicu-startovoi-v-mozile-ustanovka-nachalnoi-stranicy-v.html">Mozilla Firefox</a>உலாவிகள்:</p><p>உள்ளீடு:-moz-placeholder( நிறம்: சிவப்பு; எழுத்துரு பாணி: சாய்வு; எழுத்துரு-எடை: தடித்த; )</p><p>தயார். ஒதுக்கிடத்திற்கான CSS பாணி, நிச்சயமாக உங்கள் வடிவமைப்பிற்கு மிகவும் பொருத்தமான ஒன்றை நீங்கள் எழுதலாம். வேலை செய்யும் டெமோவை இங்கு பார்க்கலாம்</p> <p>ஒதுக்கிடப் பண்பு உங்களுக்குத் தெரியாவிட்டால், அது என்ன, எங்கு பயன்படுத்தப்படுகிறது என்பதைச் சிறிது விளக்குவோம். இது படிவ உள்ளீட்டு புலங்களில் பயன்படுத்தப்படுகிறது. பண்புக்கூறு உள்ளீட்டு புலத்தில் ஒரு உரையைக் காட்டுகிறது, இது ஒரு குறிப்பிட்ட குறிப்பின் பங்கைக் குறிக்கிறது. முன்பு எங்கள் தளத்தில் ஜாவாஸ்கிரிப்ட், நேர்மறை பக்கத்தைப் பயன்படுத்தி ஒரு உதாரணம் இருந்தது <a href="https://whatsappss.ru/ta/browser/rekvizity-formy-1s-8-3-rekvizity-upravlyaemoi-formy-1cv8-metody-dlya.html">இந்த முறை</a>இது குறுக்கு உலாவி இணக்கமானது. இப்போது உள்ளீடு மற்றும் உரைப்பகுதி கூறுகளில் பயன்படுத்தப்படும் ஒதுக்கிட பண்புக்கூறை ஸ்டைலிங் செய்வது பற்றி பேசலாம். <br>எங்கள் எடுத்துக்காட்டில் உள்ள உள்ளீட்டு புலக் குறியீடு இப்படி இருக்கும்:</p><p> <input type="text" placeholder="உங்கள் பெயரை உள்ளிடவும்"> </p><p>வெளியீட்டில் நாம் பின்வரும் புலத்தைப் பெறுகிறோம்: <input type="text" placeholder="உங்கள் பெயரை உள்ளிடவும்"></p> <p>இப்போது நாம் ஒதுக்கிடத்தை வடிவமைக்க வேண்டும் என்று கற்பனை செய்வோம், இதற்காக நாம் CSS இல் விதிகளின் தொகுப்பை எழுத வேண்டும்:</p><p>::-webkit-input-placeholder ( color: #c1c1c1; ) ::-moz-placeholder ( color: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( color: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder (color: #c1c1c1;)</p><p>நாங்கள் பெறுகிறோம்: <input class="plc" type="text" placeholder="உங்கள் பெயரை உள்ளிடவும்"></p> <p>எல்லா பண்புகளையும் எங்களால் மாற்ற முடியாது, ஆனால் நவீன உலாவிகளால் ஆதரிக்கப்படும் பெரும்பாலானவற்றின் பட்டியல் கீழே கொடுக்கப்பட்டுள்ளது: <br><b>எழுத்துரு</b>(தொடர்புடைய பண்புகள்) <br><b>பின்னணி</b>(தொடர்புடைய பண்புகள்) <br><b>நிறம்</b><br><b>வார்த்தை இடைவெளி</b><br><b>எழுத்து இடைவெளி</b><br><b>உரை-அலங்காரம்</b><br><b>செங்குத்து-சீரமைப்பு</b><br><b>உரை-மாற்றம்</b><br><b>வரி உயரம்</b><br><b>உரை-இன்டென்ட்</b><br><b>உரை வழிதல்</b><br><b>ஒளிபுகாநிலை</b></p> <p>IN <a href="https://whatsappss.ru/ta/administrator/gde-naiti-sohranennyi-fail-dokumenty-hranyashchiesya-v-seti-ili-na.html">வெவ்வேறு உலாவிகள்</a>விதி வித்தியாசமாக எழுதப்பட்டுள்ளது, ஏனெனில் ஒரே தரநிலை இல்லை என்றாலும், இந்த பதிவுகளின் தொகுப்பு தொடர்ந்து தொடர்புடையதாக உள்ளது. IE உலாவியிலும், பதிப்பு 18க்குக் கீழே உள்ள பயர்பாக்ஸிலும், ஒதுக்கிடமானது போலி-வகுப்பாகவும், புதியவற்றிலும் கருதப்படுகிறது. <a href="https://whatsappss.ru/ta/tips/luchshie-programmy-dlya-android-samye-nuzhnye-prilozheniya-dlya-android.html">firefox உலாவிகள்</a>, வெப்கிட் மற்றும் பிளிங்க் ஆகியவை போலி உறுப்புகளாகக் கருதப்படுகின்றன.</p><p><b>ப்ளேஸ்ஹோல்டரில் உரையைக் குறைக்கிறது</b><br>சில நேரங்களில் உதவிக்குறிப்புகள் மிக நீளமாக இருக்கும், அவை உள்ளீட்டு புலத்தில் முழுமையாகப் பொருந்தாது. இந்த நோக்கங்களுக்காக, உள்ளீட்டு புலத்தில் ஒதுக்கிட உரையைக் குறைக்க உங்களை அனுமதிக்கும் கூடுதல் பண்புகளையும் நீங்கள் பயன்படுத்தலாம்.</p><p>உள்ளீடு ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow :நீள்வட்டம்;)</p><p>இதன் விளைவாக, இது போன்ற ஒதுக்கிடத்துடன் உள்ளீட்டு புலத்தைப் பெறுகிறோம்: <input class="plc2" type="text" placeholder="உங்கள் பெயரை உள்ளிடவும்"></p><p><b>புலத்தில் கிளிக் செய்யும் போது உரையை மறைக்கவும்</b><br>இயல்பாக, ஒவ்வொரு உலாவியும் ஒதுக்கிடத்தின் பதிலை வித்தியாசமாக விளக்குகிறது. சில உலாவிகளில் நீங்கள் புலத்தில் கிளிக் செய்யும் போது உடனடியாக மறைக்கப்படும், மற்றவற்றில் உள்ளீட்டு புலத்தில் குறைந்தது ஒரு எழுத்து இருக்கும் போது அது மறைக்கப்படும். நீங்கள் புலத்தில் கிளிக் செய்யும் போது உரை மறைந்துவிடும், எல்லா உலாவிகளிலும் ஒரே மாதிரியாக இருக்கும்.</p><p>:focus::-webkit-input-placeholder (color: transparent; ) :focus::-moz-placeholder ( color: transparent; ) :focus:-moz-placeholder ( color: transparent; ) :focus:-ms-input -பிளேஸ்ஹோல்டர் (நிறம்: வெளிப்படையானது;)</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> </div> </article> </section> <section id="sidebar" class="secondary clearfix" role="complementary"> <aside id="nav_menu-3" class="widget widget_nav_menu clearfix"> <h3 class="widgettitle"><span>வகைகள்</span></h3> <div class="menu-menyu1-container"> <ul id="menu-menyu1" class="menu"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ta/category/security/">பாதுகாப்பு</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ta/category/multimedia/">மல்டிமீடியா</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ta/category/office-programs/">அலுவலக திட்டங்கள்</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ta/category/utilities/">பயன்பாடுகள்</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ta/category/administrator/">நிர்வாகி</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ta/category/programming/">நிரலாக்கம்</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://whatsappss.ru/ta/category/browser/">உலாவி</a></li> </ul> </div> </aside> <aside id="recent-posts-2" class="widget widget_recent_entries clearfix"> <h3 class="widgettitle"><span>சமீபத்திய பதிவுகள்</span></h3> <ul> <li> <a href="https://whatsappss.ru/ta/security/sistemy-aktivnoi-reklamy-frame-ili-iframe-chto-takoe-iframe-veb-analitika-i-freimovaya.html">பிரேம் அல்லது iframe செயலில் உள்ள விளம்பர அமைப்புகள்</a> </li> <li> <a href="https://whatsappss.ru/ta/security/kak-ubrat-iz-poiska-nenuzhnye-slova-kak-udalit-istoriyu-poiska-i.html">தேடல் வரலாறு மற்றும் பிற தரவை எவ்வாறு நீக்குவது</a> </li> <li> <a href="https://whatsappss.ru/ta/office-programs/lichnyi-kabinet-voennosluzhashchego-vhod-v-lichnyi-kabinet-bez.html">ஒரு சேவையாளரின் தனிப்பட்ட கணக்கில் பதிவு செய்தல் மற்றும் உள்நுழைதல்: அனைத்து சாத்தியங்களும் ஒரு சேவையாளரின் தனிப்பட்ட கணக்கில் என்னால் உள்நுழைய முடியாது</a> </li> <li> <a href="https://whatsappss.ru/ta/what-is-it/bezopasnyi-rezhim-vindous-10.html">பாதுகாப்பான பயன்முறை விண்டோஸ் 10</a> </li> <li> <a href="https://whatsappss.ru/ta/utilities/smail-sd-vraiter-small-cd-writer-zapis-i-sozdanie-iso-obrazov-diskov.html">சிறிய குறுவட்டு-எழுத்தாளர் - வட்டுகளின் ஐஎஸ்ஓ படங்களை பதிவுசெய்தல் மற்றும் உருவாக்குதல்</a> </li> <li> <a href="https://whatsappss.ru/ta/utilities/sent-dzhulian-otkryt-levoe-menyu-sent-dzhulians-ekstremalnye.html">செயின்ட் ஜூலியன்ஸின் இடது மெனுவைத் திற</a> </li> <li> <a href="https://whatsappss.ru/ta/administrator/ioensuu-znamenitye-dostoprimechatelnosti-i-interesnye-mesta-gorod.html">ஜோன்சு நகரம், பின்லாந்து</a> </li> <li> <a href="https://whatsappss.ru/ta/office-programs/sozdanie-grafika-sredstvami-biblioteki-gd-risovanie.html">PHP இல் வரைபடங்களை வரைதல் நாம் என்ன மாற்றினோம்</a> </li> <li> <a href="https://whatsappss.ru/ta/security/pochemu-net-zvuka-na-kompyutere-vosstanovlenie-zvuka-vosstanovlenie-zvuka-na-noutbuke-rabotaet-zvuk.html">என் கணினியில் ஏன் ஒலி இல்லை?</a> </li> <li> <a href="https://whatsappss.ru/ta/security/kak-opredelit-dlinu-massiva-javascript-i-eshche-mnogo-funkcii-raboty-s.html">ஜாவாஸ்கிரிப்ட் வரிசையின் நீளத்தை எவ்வாறு தீர்மானிப்பது மற்றும் அவற்றுடன் பணிபுரிவதற்கான பல செயல்பாடுகள்</a> </li> </ul> </aside> <aside id="nav_menu-4" class="widget widget_nav_menu clearfix" style="text-align:center;padding:0px;"> </aside> </section> </div> <div id="footer-wrap"> <footer id="footer" class="container clearfix" role="contentinfo"> </footer> </div> </div> <center style="font-size:0.8em;"> <a href='https://play.google.com/store/apps/details?id=pdf.reader.converter.jpgtopdf.imagetopdf' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=whatsappss.ru&sub2=pdf.reader.converter.jpgtopdf.imagetopdf&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a> <img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; ' loading=lazy><br><a href="https://whatsappss.ru/ta/" title="இலவச திட்டங்கள் மற்றும் பயனுள்ள குறிப்புகள் உலகம்">இலவச திட்டங்கள் மற்றும் பயனுள்ள குறிப்புகள் உலகம்</a> <br>2024 whatsappss.ru <br><br> </center> <center><noindex></noindex></center> <link rel='stylesheet' id='yarppRelatedCss-css' href='/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=4.9.1' type='text/css' media='all' /> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar", "margin_top" : 10, "margin_bottom" : 115, "stop_id" : "", "screen_max_width" : 800, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['nav_menu-4'] } ; </script> <script type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script async="async" type='text/javascript' src='https://whatsappss.ru/wp-content/plugins/akismet/_inc/form.js?ver=4.0.2'></script> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script></body> </html>