Print Page - unable to style disabled textboxes

Title: unable to style disabled textboxes
Post by: devnull on December 04, 2014, 01:16:43 AM

When setting the attribute of a textbox to readonly, the outer span wrapper element does not reflect the fact that the element is readonly and I am therefore unable to style it.

My readonly textboxes need to be styled differently from read/write textboxes

Code:

<input type="text" class="easyui-textbox textbox-f" id="PART_ALIAS" readonly="true" style="display: none;" textboxname="XXX">

<span class="textbox" style="width: 204px; height: 20px;">  <<--- No attribute to style with css

<input type="text" autocomplete="off" class="textbox-text textbox-text-readonly validatebox-text textbox-prompt" readonly="readonly" placeholder="" style="margin-left: 0px; margin-right: 0px; padding-top: 3px; padding-bottom: 3px; width: 196px;">
<input type="hidden" class="textbox-value" name="XXX" value="">
</span>

Title: Re: unable to style disabled textboxes
Post by: jarry on December 04, 2014, 01:35:28 AM

Please try to override the 'textbox-text-readonly' CSS style.

Code:

	<style>
		.textbox-text-readonly{
			opacity: 0.6;
  			filter: alpha(opacity=60);
		}
	</style>

Title: Re: unable to style disabled textboxes
Post by: devnull on December 04, 2014, 03:08:06 AM

Hi;

Thanks, but that is not correct.

If I need to set the background colour, or border style differently, then I need to set the outer span wrapper's attributes (class="textbox"), not the inner input element's attributes.

I am able to 'hack' the styling to get the desired effect:

Code:

input[readonly].easyui-textbox + span.textbox {
  background-color: #EEEEEE;
} 

input[readonly].easyui-textbox + span.textbox > input.textbox-text {
  background-color: inherit;
}

Title: Re: unable to style disabled textboxes
Post by: jarry on December 04, 2014, 07:36:40 AM

Please try to download the patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.1-patch.zip and then override the 'textbox-readonly' CSS style.

Code:

<style>
  .textbox-readonly{
    border-color: #ccc;
  }
</style>

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: devnull on December 04, 2014, 01:16:43 AM