CSS 설정 텍스트 상자

웹 개발에서 텍스트 상자는 일반적인 사용자 입력 컨트롤입니다. CSS 스타일을 통해 색상, 크기, 글꼴, 테두리 등 텍스트 상자 설정을 다양화할 수 있습니다. 이 글에서는 CSS를 사용하여 텍스트 상자를 설정하여 더욱 아름답고 실용적인 웹 페이지를 만드는 방법을 자세히 소개합니다.

1. 텍스트 상자 크기 설정

텍스트 상자의 크기를 설정하려면 CSS의 너비 및 높이 속성을 사용할 수 있습니다. 예를 들어 다음 코드는 텍스트 상자의 너비를 200픽셀로, 높이를 30픽셀로 설정합니다.

input[type="text"] {
    width: 200px;
    height: 30px;
}

또한 CSS의 max-width 및 max-height 속성을 사용하여 최대 크기를 설정할 수도 있습니다. 텍스트 상자가 맞는지 확인하기 위해 텍스트 상자의 색상을 다른 화면 크기와 일치시키세요:

input[type="text"] {
    max-width: 100%;
    height:30px;
}

2. 텍스트 상자 색상 설정

텍스트 상자의 색상은 미화에 중요한 요소 중 하나입니다. CSS background-color 속성을 사용하여 텍스트 상자의 배경색을 설정할 수 있고, color 속성을 사용하여 텍스트 상자의 텍스트 색상을 설정할 수 있습니다. 예를 들어 다음 코드는 텍스트 상자의 배경색을 회색으로, 텍스트 색상을 검정색으로 설정합니다.

input[type="text"] {
    background-color: #ccc;
    color: #000;
}

3. 텍스트 상자 글꼴 설정

텍스트 상자 색상과 마찬가지로 글꼴도 다음 중 하나입니다. 텍스트박스를 아름답게 만드는 중요한 요소. CSS의 글꼴 계열 속성을 사용하여 텍스트 상자의 텍스트 글꼴을 설정하고 글꼴 크기 속성을 사용하여 글꼴 크기를 설정할 수 있습니다. 예를 들어 다음 코드는 텍스트 상자의 글꼴을 Microsoft Yahei로 설정하고 글꼴 크기를 14pt로 설정합니다.

input[type="text"] {
    font-family: "Microsoft YaHei",Arial,sans-serif;
    font-size: 14pt;
}

4. 텍스트 상자 테두리 설정

텍스트 상자 테두리 설정도 중요한 요소 중 하나입니다. 텍스트 상자를 아름답게 꾸미는 중입니다. CSS 테두리 속성을 사용하여 텍스트 상자 테두리의 스타일, 너비 및 색상을 설정할 수 있습니다. 예를 들어 다음 코드는 텍스트 상자의 테두리를 실선, 너비 1픽셀, 회색으로 설정합니다.

input[type="text"] {
    border: 1px solid #ccc;
}

또한 CSS의 border-radius 속성을 사용하여 텍스트를 늘리기 위해 텍스트 상자의 둥근 테두리 프레임의 미학.

input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 5px;
}

5. 텍스트 상자의 초점 스타일 설정

텍스트 상자에 초점이 맞춰지면 다른 스타일을 설정하여 다른 텍스트 상자와 구별할 수 있습니다. CSS의 :focus 의사 클래스를 사용하여 텍스트 상자에 포커스가 있을 때 스타일을 지정할 수 있습니다. 예를 들어 다음 코드는 포커스를 받을 때 텍스트 상자의 배경색을 노란색으로 설정합니다.

input[type="text"]:focus {
    background-color: yellow;
}

6. 텍스트 상자의 비활성화 상태를 설정합니다.

어떤 경우에는 텍스트 상자를 사용자가 Enter를 할 수 없도록 비활성화된 상태입니다. CSS :disabled 의사 클래스를 사용하여 텍스트 상자의 비활성화된 스타일을 설정할 수 있습니다. 예를 들어, 다음 코드는 비활성화된 텍스트 상자의 배경색을 회색으로, 텍스트 색상을 밝은 회색으로 설정합니다.

input[type="text"]:disabled {
    background-color: #eee;
    color: #ccc;
}

7. 종합적인 스타일 설정

마지막으로 위의 스타일을 결합하여 완전한 스타일을 설정할 수 있습니다. 텍스트 상자. 예를 들어 다음 코드는 텍스트 상자를 완전히 설정합니다.

input[type="text"] {
    width: 200px;
    height: 30px;
    padding: 5px 10px;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 14pt;
    border: 1px solid #ccc;
    border-radius: 5px;
}

input[type="text"]:focus {
    background-color: #fff;
    outline: none;
    border-color: #66afe9;
    box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.6);
}

input[type="text"]:disabled {
    background-color: #eee;
    color: #ccc;
}

이 문서에서는 CSS 스타일을 사용하여 텍스트 상자를 설정하는 방법을 자세히 설명합니다. 이러한 스타일 설정을 통해 텍스트 상자를 더욱 아름답고 실용적으로 만들고 사용자 경험을 향상시킬 수 있습니다. 이 글이 귀하의 웹 개발 작업에 도움이 되기를 바랍니다.

위 내용은 CSS 설정 텍스트 상자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!