텍스트 상자 값 표시

Question

실제 화이트 상자가 아닌 텍스트 필드의 값만 표시하려면 어떻게해야합니까? 그래서 제가 가지고있는 것은 숫자 타입의 간단한 텍스트 필드입니다.

<input type="number" id="text" value="0"/> 

내가 원하는 것은 실제 상자 자체가 아닌 값을 표시하는 것입니다.

Answer 1

CSS를 사용하여이 작업을 수행 할 수 있어야합니다. 상자의 스타일을 웹 페이지의 배경처럼 보이게 한 다음 사용자가 값을 변경할 수 없도록 입력 상자의 속성을 설정합니다. 마지막으로 마우스 커서를 올리면 텍스트 필드처럼 보이지 않도록 커서의 CSS를 설정할 수 있습니다.

Answer 2

당신은 CSS와 투명 배경 색을 테두리를 제거하고 설정할 수 있습니다

input 
{ 
    border: none; 
    background-color:transparent; 
} 

Answer 3

그냥 이런 식으로 코드를 변경 : 이것은 당신의 예상 결과를 생성한다

<input type="number" id="text" value="0" style="border:0px;"/> 

.

이

#text{ 
    border: none; 
    background: none; 
    cursor: default; 
    padding:0; 
    margin:0; 
    font-size:1em; 
} 

당신은 글꼴이 문서의 나머지 부분과 일치하도록 할 것입니다 : heavysixer가 언급 한 바와 같이

Answer 4

, 당신은 CSS를 사용할 수 있습니다. 여기에 시연 할 바이올린이 있습니다.

Answer 5

<div style="background:#FFFFCC"> 
<input type="number" id="text" value="0" style="border:0px; background:none;"/> 
</div>