Solution 1 :

add this to your styles

  transform: rotate(90deg);
  transform-origin: center;

Problem :

I have an Input type=number in React, styled with styled-components. I need some of the inputs display it’s value vertically

export const UnitValue = styled.input`
  ::-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};

Some inputs displays vertically but it’s value is horizontal. I need that value to be displayed vertically, is there a way to do that? Here’s the input:


I need that the input value displays in the same direction of the text that is near to it without using transform css attribute. Is there a way?


Comment posted by Jake

What does the input looks like ? What does your CSS look like ? What does the desired result would look like ?

Comment posted by Stack Snippet

Questions seeking code help must include the shortest code necessary to reproduce it

Comment posted by Tushar

Share image of expected out come.

Comment posted by RyanNerd

This may answer the question. However, code only answers are not as useful as answers that document the code or have an detailed explanation on why this code is the solution to the question.