CSS 입력 색상 변경

CSS의 입력 요소는 웹사이트에서 가장 자주 사용되는 요소 중 하나입니다. 텍스트 상자, 라디오 상자, 다중 선택 상자 등 양식에서 다양한 입력 상자를 자주 볼 수 있습니다. 그러나 이러한 요소의 기본 색상이 반드시 웹사이트의 스타일 요구 사항을 충족하는 것은 아닙니다. 그렇다면 입력 요소의 색상을 변경하는 방법은 무엇입니까? 이 글에서는 입력 요소의 색상을 변경하는 다양한 방법을 소개합니다.

1. CSS를 통해 입력 요소의 색상을 수정합니다

CSS에서는 아래와 같이 background-color 속성을 사용하여 입력 요소의 배경 색상을 설정할 수 있습니다.

input{

background-color: #cccccc;

}

이렇게 설정하면 입력 요소의 색상이 회색이 됩니다. 텍스트 색상, 테두리 색상 등과 같은 다른 속성을 설정할 수도 있습니다. 예:

input{

background-color: #ffffff;
color: #333;
border: 1px solid #333;

}

위 코드는 입력 요소의 배경색을 흰색으로, 텍스트 색상을 어두운 회색으로, 테두리 색상을 검정색으로 설정한다는 의미입니다.

2. CSS를 통해 입력 요소의 초점 색상을 수정합니다.

사용자가 입력 요소를 클릭하면 해당 색상도 수정할 수 있습니다. 이때 :focus pseudo-class를 사용해야 합니다. 예:

input:focus{

background-color: #f8e5a1;
color: #333;
border: 1px solid #333;

}

이를 설정한 후 사용자가 입력 요소를 클릭하면 배경색이 노란색으로 변경되고 텍스트 색상과 테두리 색상은 변경되지 않습니다.

3. CSS를 통해 입력 요소의 호버 색상을 수정합니다.

또한 :hover 가상 클래스를 사용하여 입력 요소 위에 마우스를 올렸을 때 색상을 수정할 수도 있습니다. 예:

input:hover{

background-color: #f5f5f5;

}

이를 설정한 후 마우스를 입력 요소 위로 가져가면 배경색이 밝은 회색으로 변합니다.

4. CSS를 통해 다양한 유형의 입력 요소 색상을 수정합니다.

다양한 유형의 입력 요소에는 텍스트 상자, 라디오 상자, 다중 선택 상자, 버튼 등이 포함됩니다. 다양한 CSS 선택기를 사용하여 다양한 유형의 입력 요소를 선택한 다음 색상을 수정할 수 있습니다. 예:

input[type="text"]{

background-color: #ffffff;
color: #333;
border: 1px solid #ccc;

}

위 코드는 텍스트 상자 유형의 입력 요소를 선택하고 배경색을 흰색으로, 텍스트 색상을 어두운 회색으로, 테두리 색상을 설정하는 것을 의미합니다. 밝은 회색으로.

input[type="checkbox"]{

/*设置复选框的颜色*/

}

input[type="radio"]{

/*设置单选框的颜色*/

}

input[type="submit"]{

/*设置提交按钮的颜色*/

}

5. 통과 JavaScript는 입력 요소의 색상을 수정합니다

CSS 외에도 JavaScript를 사용하여 입력 요소의 색상을 동적으로 수정할 수도 있습니다. 예를 들어 버튼을 클릭하면 텍스트 상자의 배경색이 빨간색으로 변경됩니다. 이를 달성하려면 다음 코드를 사용할 수 있습니다.

//버튼 요소 가져오기
var btn = document.getElementById("btn");
//텍스트 상자 요소 가져오기
var text = document.getElementById("text" );
//Give Button 바인딩 클릭 이벤트
btn.onclick = function(){

text.style.backgroundColor = "#ff0000";

}

JavaScript를 통해 입력 요소의 색상을 동적으로 수정하는 것은 매우 유연하지만 페이지 성능에 영향을 미칠 수 있다는 점에 유의해야 합니다. . 따라서 JavaScript를 사용하여 입력 요소의 색상을 수정할 때는 신중하게 고려해야 합니다.

요약

위의 방법을 통해 입력 요소의 색상을 쉽게 변경할 수 있습니다. CSS에서 기본 색상, 초점 색상, 호버 색상 등을 설정하거나 다른 CSS 선택기를 사용하여 다양한 유형의 입력 요소를 선택할 수 있습니다. JavaScript를 사용하여 보다 유연한 색상 수정을 달성할 수도 있습니다. 이 기사가 도움이 되기를 바랍니다.

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