input 태그 커서 깜빡임 크기조정을 어떻게 해야하나요?

Question

import React, { useState, useRef, useEffect } from 'react'; import styled from 'styled-components'; import { theme } from '@/style/theme'; import { InputProps } from '@/types/common'; const InputWrapper = styled.div` position: relative; display: inline-block; width: ${({ width }) => `${width}rem`}; height: ${({ height }) => `${height}rem`}; `; const StyledInput = styled.input` width: 100%; height: 100%; border-radius: 1.6rem; border: 0.3rem solid ${theme.colors.nextButton}; padding: 1.6rem 1.8rem; color: #b4b4b4; font-family: ${theme.font.bold}; outline: none; background: white; caret-color: transparent; font-size: 2.1rem; &::selection { background: ${theme.colors.nextButton}; color: ${theme.colors.white}; } &:hover { border: 0.3rem solid ${theme.colors.nextButton}; background: #00000008; } &:focus { border: 0.3rem solid ${theme.colors.nextButton}; color: ${theme.colors.black}; background: ${theme.colors.white}; } &:not(:focus) { color: ${theme.colors.black}; } `; const Cursor = styled.div<{ left: number }>` position: absolute; top: 50%; left: ${props => `${props.left}px`}; transform: translateY(-50%); width: 0.2rem; height: 30%; background-color: ${theme.colors.black}; animation: blink 1s steps(1) infinite; transition: left 0.1s; @keyframes blink { 50% { opacity: 0; } } `; const DynamicCursorInput: React.FC = ({ width, height, maxLength, ...props }) => { const [inputValue, setInputValue] = useState(''); const [cursorPosition, setCursorPosition] = useState(0); const inputRef = useRef(null); const [isFocused, setIsFocused] = useState(false); useEffect(() => { if (inputRef.current) { const textWidth = getTextWidth(inputValue, getComputedStyle(inputRef.current).font); const maxWidth = inputRef.current.offsetWidth - 36; setCursorPosition(Math.min(textWidth, maxWidth)); } }, [inputValue]); const getTextWidth = (text: string, font: string) => { const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); if (context) { context.font = font; return context.measureText(text).width; } return 0; }; const handleInputChange = (e: React.ChangeEvent) => { if (maxLength && e.target.value.length > maxLength) { return; } setInputValue(e.target.value); }; return ( setIsFocused(true)} onBlur={() => setIsFocused(false)} {...props} /> {isFocused && } {/* 18px for left padding */} ); }; export { DynamicCursorInput };Cursor 를 좀 뚱뚱하게(굵게) 만들어야합니다.그런데 지역상태로 관리하면 뭔가 별로 인 것 같아서 질문남깁니다.찾아봤는데 커서 깜빡임의 색상과 투명도만 조정할 수 있고 크기는 조정이 안되더라고요;; 위와 같은 식으로 InputWrapper 크기를 고정시키고 그안에 input 태그를 꽉 채운 후 Cursor 를 absolute 로 고정 시킨 후 input text 입력 시마다 +20px , -20px 하려고 하는데 이렇게 하는게 맞나요?뭔가 css 만으로도 충분히 해결 가능해보이는데 제가 부족하여서 잘 모르겠네요 ㅠㅠ전문가의 조언 부탁드립니다.

킁킁탐정 · Answer

현 CSS 스펙으로는 지원안합니다. DRAFT 상태인 새로운 스펙에서 지원됩니다만 미래는 알 수 없습니다.자세한건 다음을 참고하세요.https://css-tricks.com/almanac/properties/c/caret-shape/

gdev219 · Answer

굳이 그렇게 해야하는 이유가 있나요? mdn에 caret 조정 하는 api 없으면 기존거는 안보이게 처리하고 따로 커스텀으로 구현하시면 됩니다만..( 말씀하시는 커서 처럼 보이게) 굳이 왜 해야하는지 모르겠습니다. a11y 위배 같아 보이기도 하네요

input 태그 커서 깜빡임 크기조정을 어떻게 해야하나요?

2개의 답변

#css3 목록