Having an input field with type=number in a React application styled using styled-components, I am looking to have certain inputs display their values vertically.
export const UnitValue = styled.input`
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
font-weight: bold;
text-align: center;
margin-right: ${props => {props.marginRight};
margin-top: ${props => props.marginTop};
margin-left: ${props => {props.marginLeft};
width: ${props => {props.width};
height: ${props => {props.height}
border: ${props => {props.border};
background-color: ${props => props.color};
`;
While some inputs are displaying vertically, their values appear horizontally. Is there a way to make the value display vertically as well? Here is the input:
https://i.sstatic.net/stKhx.png
I want the input value to be displayed vertically along with the adjacent text, without relying on the transform CSS attribute. Any solutions for this?