CSS를 사용하여 양식 필드를 비활성화하려면 어떻게합니까?

180

CSS를 사용하여 양식 필드를 비활성화 할 수 있습니까? 물론 비활성화 된 속성에 대해 알고 있지만 CSS 규칙에서 지정할 수 있습니까? 같은 것-

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

내가 묻는 이유는 양식 필드가 자동 생성되고 일부 규칙 (Javascript에서 실행되는)에 따라 필드가 숨겨 지거나 표시되는 응용 프로그램이 있기 때문입니다. 이제 필드 비활성화 / 활성화를 지원하도록 확장하고 싶지만 양식 필드의 스타일 속성을 직접 조작하기 위해 규칙이 작성되는 방식입니다. 이제 규칙 필드를 확장하여 속성과 양식 필드 스타일을 변경해야하며 어쨌든 이상적이지 않은 것 같습니다.

CSS에 표시 및 표시 속성이 있지만 활성화 / 비활성화하지 않은 것이 매우 궁금합니다. 여전히 작동중인 HTML5 표준 또는 비표준 (브라우저 특정)에 비슷한 것이 있습니까?

html css

— 아누 팜자인
소스

5

아래에 여러 번 언급되었지만 소음이 없어졌습니다. 포인터 이벤트를보십시오 : 없음;

— Corey Alix

89

도움이 될 수 있습니다.

<input type="text" name="username" value="admin" >

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

최신 정보:

탭 인덱스에서 비활성화하려면 다음과 같이 사용할 수 있습니다.

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

— 페레 이둔 바익 제이
소스

3

모든 입력 필드를 비활성화 한 후의 모습처럼 보이지만 마우스 이벤트를 차단하지만 키보드 탭을 사용하여 액세스하고 변경할 수 있습니다.

— Ken

11

탭 인덱스 CSS 속성이 없습니다. html 속성 (tabindex = -1)

— 이어야합니다.

1

탭 색인을 찾지 못하고 크롬에서 작동하지 않아 Tab 키를 누르면 비활성화 기능이 사라져 완벽한 솔루션이 아닙니다.

— QMaster

172

CSS를 사용하여 비활성화 된 효과를 가짜로 만들 수 있습니다.

pointer-events:none;

색상 등을 변경하고 싶을 수도 있습니다.

— 아나 이미
소스

68

이 방법은 도움이되지만 필드를 누르는 것을 막지는 않습니다.

— jerwood

나는 빵 부스러기의 마지막 링크를 "비활성화"하고 싶었고이 해결 방법을 염두에 두지 않았습니다. : D

— Facundo Colombier

2

또한 양식 값이 제출되는 것을 막지 않습니다.

— Ken Wayne VanderLinde

1

@KenWayneVanderLinde 비활성화 된 속성이 맞지 않습니까?

— theonlygusti

2

@theonlygusti 양식에서 비활성화 된 <input> 요소는 제출되지 않습니다.

— dougd_in_nc

113

규칙이 JavaScript로 실행되므로 javascript (또는 예제에서는 jQuery)를 사용하여 규칙을 비활성화하지 않는 이유는 무엇입니까?

$('#fieldId').attr('disabled', 'disabled'); //Disable
$('#fieldId').removeAttr('disabled'); //Enable

최신 정보

attr아래 댓글에서 지적 된 바와 같이 기능은 더 이상이에 대한 기본 접근 방식입니다. 이것은 이제 prop기능으로 수행됩니다 .

$( "input" ).prop( "disabled", true ); //Disable
$( "input" ).prop( "disabled", false ); //Enable

— 네덜란드 인 432
소스

1

$ ( '# filedId'). removeAttr ( 'disabled')이 아니어야합니다. // 활성화

— Anupam Jain

6

사용자가 JavaScript를 비활성화 한 경우이 솔루션이 작동하지 않을 수 있습니다.

— josh-fuggle

1

Firefox 20.0 (다른 버전에 대해서는 잘 모르겠지만 개발에 사용하는 것임)은 속성을 제거해야합니다. @ Dutchie432는 이론상 옳지 만 .removeAttr ( 'disabled'); 올바른 실제 솔루션입니다 (적어도 현재 브라우저에서).

1

JQuery를 사용할 수 없으면

— 해병대

3

참고로-jQuery 문서는 이 경우 .prop()대신 사용 을 제안 .attr()합니다. "jQuery 1.6부터 .attr () 메소드는 설정되지 않은 속성에 대해 정의되지 않은 값을 리턴합니다. 양식 요소의 점검, 선택 또는 사용 안함 상태와 같은 DOM 특성을 검색하고 변경하려면 .prop () 메소드를 사용하십시오. " 출처 문서 : .attr () 및 .prop ()

— Nicholas Ryan Bowers

54

CSS에 표시 및 표시 속성이 있지만 활성화 / 비활성화하지 않은 것이 매우 궁금합니다.

그것이 매우 궁금하다고 생각하는 것이 매우 궁금합니다. CSS의 목적을 오해하고 있습니다. CSS는 양식 요소 의 동작 을 변경하기위한 것이 아닙니다 . 스타일 만 변경하기위한 것 입니다 . 텍스트 필드를 숨겨도 텍스트 필드가 더 이상 존재하지 않거나 양식을 제출할 때 브라우저가 데이터를 보내지 않는다는 의미는 아닙니다. 그것은 사용자의 눈에서 그것을 숨기기 만하면됩니다.

실제로 비활성화하여 필드에, 당신은 해야한다 사용 disabledHTML의 특성 또는 disabled자바 스크립트 DOM 속성을.

— BoltClock
소스

35

물론 CSS가 "의도되는"것이 무엇인지 알고 있습니다. 그러나 최신 웹앱의 경우 "프레젠테이션"과 "행동"의 차이는 진흙보다 더 무겁습니다. 비활성화 된 필드는 서버에 제출되지 않으므로 동작이 변경됩니다. 그러나 모든 양식 필드가 어떻게 숨겨져 있습니까?! 아마도 당신이 웹에서 할 수있는 모든 일이 텍스트를 읽고 양식을 작성하는 것이었을 때의 구별은 더 분명했습니다. 최신 웹 응용 프로그램에서 프레젠테이션을 동작과 분리하려면 CSS와 HTML / JS가 잘못된 방법입니다.

— Anupam Jain

17

disabled는 동작이 아닌 상태입니다. 그가 요구하는 것은 완벽하게 합리적입니다. 예를 들어, 데이터가 처리되는 동안 여러 필드에 사용 중 클래스를 추가 할 수 있습니다. 또한 W3C는 비활성화 된 의사 클래스를 통해 요소를 CSS로 선택할 수 있으므로 동의하는 것 같습니다.

— IAmNaN

3

@IAmNaN : 1) "비활성화는 상태가 아니라 동작입니다." 다른 모든 HTML / DOM 속성도 마찬가지입니다. 2) "예를 들어, 데이터가 처리되는 동안 여러 필드에 사용 중 클래스를 추가 할 수 있습니다." 스크립트에서 그렇게합니다. 3) "또한, W3C는 비활성화 된 의사 클래스를 통해 CSS를 선택하여 요소를 선택할 수 있기 때문에 동의하는 것 같습니다." 활성화 또는 비활성화 여부에 따라 요소 를 선택할 수 있다는 것은 CSS를 사용하여 해당 상태 를 변경할 수있는 것과 관련이 없습니다 .

— BoltClock

5

CSS에는 실제로 동작의 변화로 간주 될 수있는 많은 것들이 있습니다. 예 : pointer-events : none; @ANaimi가 언급했습니다. 따라서 비활성화는 디스플레이 속성으로 쉽게 간주 될 수 있습니다. 너무 나쁘지 않아서 몇 가지를 쉽게 만들 수 있습니다.

— Mikael Lepistö

1

@Mikael Lepistö : 예, pointer-eventsCSS 속성에 동의하지 않습니다 . 참고 pointer-events 로 SVG 에서 유래 합니다.

— BoltClock

22

CSS를 사용하여 텍스트 상자를 비활성화 할 수 없습니다. 해결책은 HTML 속성입니다.

disabled="disabled"

— 비스와 나스 달비
소스

이것은 원칙적으로 작동하지만 전체 질문을 읽으면 양식 필드가 자동 생성되고 나중에 비활성화해야합니다.

— thelem

1

@mr_eclair. ---> 포인터 이벤트를 사용하는 것이 가능합니다 : none; CSS 속성.

— Fereydoon Barikzehy 2016 년

3

참고 : disabled속성이있는 요소 는 제출되지 않으며 해당 값은 서버에 게시되지 않습니다. 에 읽기 : stackoverflow.com/q/8925716/1066234

— Kai Noack

17

실용적인 해결책은 CSS를 사용하여 실제로 입력을 숨기는 것입니다.

자연스럽게 결론을 내릴 수 있도록 각 실제 입력에 대해 두 개의 html 입력 (하나는 사용 가능하고 하나는 사용 불가능)을 작성한 다음 javascript를 사용하여 CSS를 표시하고 숨길 수 있습니다.

— 그래픽
소스

3

Javascript를 사용하는 경우 필요에 따라 비활성화 / 활성화하는 것이 합리적입니까?

— MindVox

실제로, 그러나이 특정한 질문의 맥락에서, 이것은 실행 가능한 접근법 일 수 있습니다.

— graphicdivine

10

처음으로 무언가에 대답하고 겉보기에는 약간 늦었습니다 ...

이미 사용하고 있다면 자바 스크립트로 동의합니다.

필자가 일반적으로 사용하는 복합 구조의 경우 사용자 상호 작용으로부터 요소를 차단하고 전체 구조를 조작하지 않고도 스타일링을 허용하기 위해 요소 뒤에 CSS 의사를 만들었습니다.

예를 들어 :

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

disabled랩핑에 수업을 할 수 있습니다div

.disabled { 
    position : relative; 
    color    : grey;
}
.disabled:after {
    position :absolute;
    left     : 0;
    top      : 0;
    width    : 100%;
    height   : 100%;
    content  :' ';
}

이 안에 텍스트가 회색으로 표시되어 div사용자가 사용할 수 없게됩니다.

내 예제 JSFiddle

— 라키
소스

4

BTW : 여전히 탭을 처리하여 사용자가 현장에 도착하여 변경할 수 있도록해야합니다.

— K Kimble

2

<select>에 class = "disabled"가 없어야합니까?

— TimoSolo

나는 이것과 같은 것이 있다는 것을 알고 훌륭합니다. :) 감사합니다

— James Harrington

이것은 정말 유용합니다. 자바 스크립트를 사용하여 사용 중지로 설정하는 것이 더 낫다는 것을 알고 있지만 제출하면 작동하지 않는다는 오류 메시지 외에도 사용자에게 명확하게하는 문제를 해결합니다.

— jerclarke

8

나는 항상 사용하고 있습니다 :

input.disabled {
    pointer-events:none;
    color:#AAA;
    background:#F5F5F5;
}

그런 다음 CSS 클래스를 입력 필드에 적용하십시오.

<input class="disabled" type="text" value="90" name="myinput" id="myinput" />

— 카이 노악
소스

4

input [name = username] {사용 중지 : true; / * 작동하지 않습니다 * /}

이 질문은 꽤 오래되었지만이 문제가 발생하는 다른 사용자에게는 입력을 비활성화하는 가장 쉬운 방법은 단순히 ': disabled'라고 가정합니다.

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

실제로, 추가 조건에 따라 자동으로 비활성화되는 javascript 또는 jquery를 사용하여 입력을 동적 / 자동으로 비활성화하는 스크립트가있는 경우.

예를 들어 jQuery에서 :

if (condition) {
// Make this input prop disabled state
  $('input').prop('disabled', true);
}
else {
// Do something else
}

CSS의 답변이 도움이되기를 바랍니다.

— 쉐 이즈
소스

2

내가 두려워하지는 않지만 필드에 속성을 추가하지 않으려는 경우 jQuery에서 다음을 수행 할 수 있습니다. 이것을 <head></head>태그 안에 넣으십시오.

$(document).ready(function(){ 
  $(".inputClass").focus(function(){
    $(this).blur();
  }); 
});

JS에서 필드를 생성하는 경우 (JS 사용) 대신 다음을 수행해야합니다.

$(document).ready(function(){ 
  $(document).on("focus", ".inputClass", function(){
    $(this).blur();
  }); 
});

— 크림
소스

1

입력 요소 위에 오버레이를 두어 중요하지 않은 목적으로 수행 할 수 있습니다. 다음은 순수 HTML 및 CSS의 예입니다.

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

— 정의
소스

1

이 목적으로 CSS를 사용할 방법이 없습니다. 내 조언은 입력에 적용된 CSS 클래스를 할당하거나 변경하는 자바 스크립트 코드를 포함하는 것입니다. 그런 것 :

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}

.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>

스 니펫 확장

— 조엘 바바
소스

0

pointer-events: none;레이블이있는 컨트롤 또는 tabindex를 통해 여전히 액세스 가능한 입력 문제를 해결 하는 솔루션 의 변형 은 입력을 비활성화 된 텍스트 입력으로 스타일이 지정된 div로 랩핑 input { visibility: hidden; }하고 입력이 "비활성화"될 때 설정 하는 것입니다. .
참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/visibility#Values

div.dependant {
  border: 0.1px solid rgb(170, 170, 170);
  background-color: rgb(235,235,228);
  box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
  display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
  display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
  visibility: hidden;
}

<form>
  <label for="chk1">Enable textbox?</label>
  <input id="chk1" type="checkbox" />
  <br />
  <label for="text1">Input textbox label</label>
  <div class="dependant">
    <input id="text1" type="text" />
  </div>
</form>

스 니펫 확장

위 스 니펫에 적용된 비활성화 된 스타일은 Chrome UI에서 가져온 것으로 다른 브라우저에서는 비활성화 된 입력과 시각적으로 동일하지 않을 수 있습니다. 엔진 별 CSS 확장 접두사를 사용하여 개별 브라우저에 맞게 사용자 정의 할 수 있습니다. 한 눈에 볼 수는 없지만
Microsoft CSS 확장 , Mozilla CSS 확장 , WebKit CSS 확장

부가 가치 소개 훨씬 더 합리적인 것 같다 visibility: disabled거나 display: disabled또는 심지어 appearance: disabled, 주어진 visibility: hidden이미 영향을 미치는 행동 해당 요소에 관련된 모든 제어 요소를.

— 매튜 밀라
소스