Disable a Textbox Using CSS

Disable a textbox using CSS

CSS cannot disable the textbox, you can however turn off display or visibility.

display: none;
visibility: hidden;

Or you can also set the HTMLattribute:

disabled="disabled"

How do I disable form fields using CSS?

This can be helpful:

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

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

Update:

and if want to disable from tab index you can use it this way:

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

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

Disable Form Input with CSS

Here is the correct CSS selector:

input[name="rs:def:website"] {  pointer-events: none;}
<input type="text" name="rs:def:website" size="48" maxlength="64">

Can one disable an input field by pure css?

No you cannot disable the functionality of it via just CSS (since it is there just for styling purposes), though you can make it appear greyed out like a disabled button using CSS. To make it disabled in terms of functionality, you will have to resort to JavaScript.


With CSS all you can do is to style your button greyed out via CSS and then create another element over it making its z-index higher, setting position and opactiy to fully transparent. This would mean your actual element is enabled but one will not be able to click it because of element over it with full transparency.


Another solution is to just add pointer-events: none; to the style of the dom element, should work on most of the browsers.

Disable a text box without using disabled

Use readonly attribute instead :

$('#textBox').prop('readonly', true);

Use .attr() instead of .prop() if you're using jQuery < 1.9

Textbox disable when change width css

The section with class b-infoblock is coming on top of the input. Use below css to clear it.

.b-infoblock{
margin-top: 0 !important
clear: both;
}

Disabled text box accessible using tab key

Use the disabled attribute on your input.

<input type="text" disabled="disabled" placeholder="disabled" />

Also; there is no input type textbox, if you want the big one, use <textarea>value</textarea>

Disable Textbox suggestions

autocomplete="off" add this as attribute to your control
e.g.

<input type="text" autocomplete="off" />

How to make a disabled select box look like a normal text box(css only)

Thank @Christoph and @Carine, i override the chose disable class by giving inline css as

.chosen-disabled {
opacity: 1 !important;
}

now its working fine, thanks once again for your support.

Enable and Disable Text Box Using Java Script?

You should remove Attribute instead of setting it (disable) to false.

function getElement(elm){    var elem = document.getElementById(elm);    return elem;}//==============================================================///*-------------FUNCTION TO DISABLE AN TEXT BOX-----------------*/function disable(elm){    return getElement(elm).setAttribute("disabled", true);}//==============================================================///*--------------FUNCTION TO DISABLE AN TEXT BOX----------------*/function enable(elm){    return getElement(elm).removeAttribute("disabled");}
getElement("button").addEventListener("click",function(){disable("text-box2");});getElement("button2").addEventListener("click",function(){enable("text-box2");});
<input type="text" id="text-box1"/><input type="text"  id="text-box2"/><button id="button">disable</button><button id="button2">enable</button>


Related Topics



Leave a reply



Submit