@AlarmClock 코드
영어에서 번역됨
검색창 문구를 변경합니다
<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일
- 무제한