Solved

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

Posted on 2016-10-21
12
72 Views
Last Modified: 2016-10-24
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
Comment
Question by:Eduardo Fuerte
  • 5
  • 4
  • 3
12 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 41853806
Maybe change the CSS class "text-muted" or "br-light light"?  I think the CSS disabled  selector is your friend here.
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41853808
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 41853819
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
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 41853848
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
 

Author Comment

by:Eduardo Fuerte
ID: 41853912
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
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41853988
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

Author Comment

by:Eduardo Fuerte
ID: 41854076
Good for inputs!

Could you please check for select?

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

Open in new window

0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41854158
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
 

Author Comment

by:Eduardo Fuerte
ID: 41856897
I had tryed this before.  It doesn't work too.
0
 
LVL 52

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41856991
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
 

Author Closing Comment

by:Eduardo Fuerte
ID: 41857271
Thank you for solution!
0
 
LVL 52

Expert Comment

by:Julian Hansen
ID: 41857339
You are welcome.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now