[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 105
  • Last Modified:

Could you sugest a way to make textbos like that more visible just when it's disabled?

Hi Experts

Could you sugest a way to make textbos like that more visible just when it's disabled?

img001
Using:
<div class="col-xs-6 mb20">
	<label for class="field-label text-muted mb10">Enviado Por</label>
	<div class="input-group">
		<span class="input-group-addon">
			<i class="fa fa-cog c-gray"></i>
		</span>
		<span class="validar">
			<input type="text" name="enviado_por" id="enviado_por" class="form-control gui-input br-light light" placeholder="">
		</span>
	</div>
</div>

Open in new window


Thanks in advance!
0
Eduardo Fuerte
Asked:
Eduardo Fuerte
  • 5
  • 4
  • 3
1 Solution
 
Ray PaseurCommented:
Maybe change the CSS class "text-muted" or "br-light light"?  I think the CSS disabled  selector is your friend here.
0
 
Julian HansenCommented:
That code does not appear to have anything disabled but if you want to style a disabled control you can do this

input[disabled] {
   color: #444;
}

Open in new window

0
 
Ray PaseurCommented:
Here's a link: http://www.w3schools.com/cssref/sel_disabled.asp

Here's an example:
https://iconoun.com/demo/temp_efuerte.php
<?php // demo/temp_efuerte.php
/**
 * https://www.experts-exchange.com/questions/28977971/Could-you-sugest-a-way-to-make-textbos-like-that-more-visible-just-when-it's-disabled.html
 *
 * http://www.w3schools.com/cssref/sel_disabled.asp
 */
error_reporting(E_ALL);

// CREATE A SMALL HTML SNIPPET USING HEREDOC NOTATION
$htm = <<<EOD
<style type="text/css">
input[type="text"] {
    background: green;
}
input[type="text"]:disabled {
    background: orange;
}
</style>

<input type="text" />
<input type="text" disabled />
EOD;

echo $htm;

Open in new window

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
Ray PaseurCommented:
code does not appear to have anything disabled
True, but we can't see the effect of JavaScript.  The input controls may get disabled conditionally, based on client actions.
0
 
Eduardo FuerteAuthor Commented:
The code is disabled in jQuery after modal is opened:

$('#view').on('show.bs.modal', function () {

	$('#view input').prop("disabled", true);
	$('#view select.dropdown').attr('disabled', true);
	$('#view .select select').prop('disabled',true)

});

Open in new window


It's ok  to be disabled, just need to be more visible.

I'm founding the better place to put this .css code since this is a Codeigniter view.
0
 
Julian HansenCommented:
Do you have a custom stylesheet - if so put it in there.

As you want the disabled boxes throughout your application to be the same I would put in as

input[disabled] {
   color: #444!important;
}

Open in new window


It is a good idea to use important sparingly but in this case, unless there are conditions under which you want the disabled inputs to be a lighter color, you want this as a globally enforced style.
Alternative style declaration
input:disabled {
   color: #444!important;
}

Open in new window

0
 
Eduardo FuerteAuthor Commented:
Good for inputs!

Could you please check for select?

(it doesn't run)
select select:disabled {
   color: #444!important;
}

Open in new window

0
 
Julian HansenCommented:
select select:disabled {
   color: #444!important;
}

Open in new window

What you are saying here is style all disabled <select>'s that are themselves inside a <select> - which is a non existent case
Just do this
select:disabled {
   color: #444!important;
}

Open in new window

0
 
Eduardo FuerteAuthor Commented:
I had tryed this before.  It doesn't work too.
0
 
Julian HansenCommented:
It does work - as you can see here

What we need to find out is why it does not work in your particular case.

Step 1

Test to see if this sample works in your browser

Click the checkbox on the page and see if the top set of controls changes colour from yellow to red.
0
 
Eduardo FuerteAuthor Commented:
Thank you for solution!
0
 
Julian HansenCommented:
You are welcome.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now