EasyUI Forum
September 14, 2025, 08:27:39 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: unable to style disabled textboxes  (Read 10975 times)
devnull
Sr. Member
****
Posts: 431


View Profile
« 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>

Logged

-- Licensed User --
jarry
Administrator
Hero Member
*****
Posts: 2298


View Profile Email
« Reply #1 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>
Logged
devnull
Sr. Member
****
Posts: 431


View Profile
« Reply #2 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;
}



« Last Edit: December 04, 2014, 03:26:53 AM by devnull » Logged

-- Licensed User --
jarry
Administrator
Hero Member
*****
Posts: 2298


View Profile Email
« Reply #3 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>
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!