@AlarmClockのコード

英語から翻訳

Code for @AlarmClock

7

9

これで検索バーの文言が変わります

<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;

}

/* 元のプレースホルダーテキストを不可視にします */

#search-input::placeholder {

opacity: 0;

}

/* 新しいプレースホルダーテキスト */

.search-input:after {

content: "愛情を求めてる?押してね!";

font-family: 'American Typewriter';

font-size: 1rem;

font-weight: normal;

position: absolute;

max-width: 68%; /* 小さいデバイスでない限り目立ちません */

top: 50%;

transform: translateY(-50%);

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis; /* テキストが長すぎる場合に唐突に切れるのではなく省略記号を追加します */

pointer-events: none;

transition: color 600ms ease, opacity 300ms ease; /* プレースホルダーテキストを微妙にフェードイン/アウトさせたくない場合は、ここでのopacityトランジションを削除してください */

}

/* デフォルトでは入力したテキストを隠します */

#search-input,

.css-bar9lc:focus-within .search-input:after,

.search-input:has(#search-input:not(:placeholder-shown)):after {

opacity: 0;

}

/* 検索バーにテキストが入力されているか、クリックされたときに入力したテキストを表示します */

.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>


これでプロフィール画像の幅と高さが変わります

<style>

.css-18bnokj {

width: 500px;

height: 500px;

</style>

作成済み 2025年6月11日

更新済み 2025年6月11日

公開済み 2025年6月11日

  • 無制限
プロキシ許可

公開チャット