Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2016-10-21
12
Medium Priority
?
92 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
  • 3
12 Comments
 
LVL 111

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 59

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 111

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
A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

 
LVL 111

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 59

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
 

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 59

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 59

Accepted Solution

by:
Julian Hansen earned 2000 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 59

Expert Comment

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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
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.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

721 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