Kods priekš @AlarmClock
Tulkots no angļu valodas
ŠIS MAINĪ MEKLĒŠANAS JOSLAS TEKSTU
<style>
#search-input {
font-family: 'American Typewriter'; !important;
font-size: 1rem !important;
font-weight: normal;
caret-color: #000;
transition: color 600ms ease, caret-color 600ms ease;
}
/* padara sākotnējo vietas turētāja tekstu neredzamu*/
#search-input::placeholder {
opacity: 0;
}
/* JAUNais VIETAS TURĒTĀJA TEKSTS */
.search-input:after {
content: "Ilgas pēc pieķeršanās? Nospied mani!";
font-family: 'American Typewriter';
font-size: 1rem;
font-weight: normal;
position: absolute;
max-width: 68%; /* nav pamanāms, ja vien neizmanto mazāku ierīci */
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* pievieno daudzpunkti, nevis pēkšņu pārtraukumu, kad teksts ir pārāk garš */
pointer-events: none;
transition: color 600ms ease, opacity 300ms ease; /* ja nevēlaties, lai vietas turētāja teksts maigi parādītos/pazustu, noņemiet šeit opacity pāreju */
}
/* pēc noklusējuma paslēpj ierakstīto tekstu */
#search-input,
.css-bar9lc:focus-within .search-input:after,
.search-input:has(#search-input:not(:placeholder-shown)):after {
opacity: 0;
}
/* padara ierakstīto tekstu redzamu, kad meklēšanas joslā ir teksts vai tā ir noklikšķināta */
.css-bar9lc:focus-within #search-input,
.search-input:has(#search-input:not(:placeholder-shown)) #search-input {
opacity: 1;
}
.search-input {
position: relative;
overflow: hidden;
border-radius: 2px;
transition: background-color 600ms ease;
}
</style>
ŠIS MAINĪ JŪSU PROFILA ATTĒLA PLATUMU UN AUGSTUMU
<style>
.css-18bnokj {
Width: 500px;
height: 500px;
</style>
Izveidots 2025. g. 11. jūn.
Atjaunināts 2025. g. 11. jūn.
Publicēts 2025. g. 11. jūn.
- Bezgalīgi