Was ist der CSS-Stil, den ich brauche, um eine readonly-textbox-Steuerelement deaktiviert look

Nur zuvorkommen', warum willst du das Antworten Hier ist, was ich Tue:

Wenn ein anderes control geklickt wird, mache ich einen ajax-Aufruf, um einen server generierten Wert, und Dinge, die es in die textbox. Ich habe dann auf der client-Seite, setzen Sie das control auf readOnly (ich will nicht die Kontrolle deaktiviert werden, da ich es brauche postback, also Im festlegen des readOnly-Attribut).

Leider als readOnly es nicht Aussehen 'deaktiviert'

Ich würde gerne, dass die textbox deaktiviert look-by-doing ein .addClass.

Habe ich mucked um mit verschiedenen Stilen, aber ich bin nicht näher zu bekommen, die Aussehen.

Durch die Art und Weise dieser wird im IE (und könnte IE7 oder niedriger, so dass kein Umriss-Stil, fürchte ich).

Irgendwelche Ideen dankbar empfangen.

InformationsquelleAutor user129345 | 2009-10-08

Habe ich gerade gespielt. Ich bin Deaktivierung von input-Elemente mit JS und JQuery. Auf einem Formular habe ich ein Kontrollkästchen mit "disabler" - Klasse und Elemente, die deaktiviert werden gekennzeichnet mit "disableable" - Klasse.

Vor dem gleichen problem wie du und es gelöst setzen und entfernen von hidded Feld on-the-fly mithilfe von JQuery-DOM-manipulation. Funktioniert korrekt über den Browser.

Diese Funktion ist gebunden mit disabler.onClick und form.onLoad:

$.My.InitDisabler = function() {
    if (!$('.disabler').attr('checked')) {
        $('.disableable').each(function() {
            $(this).attr("disabled", "true");
            var templ = '<input name="{0}" type="hidden" value="{1}" class="disable_hdn" />';
            $(this).after($.format(templ, $(this).attr("name"), $(this).val()));
        });
    }
    else {
        $('.disable_hdn').remove();
        $('.disableable').removeAttr("disabled");
    }
}

InformationsquelleAutor Andriy Tkach

10

Beste Weg ist, um deaktivieren Sie eine textbox in der üblichen Weise, dann nehmen Sie einen screen shot von der Seite und laden Sie es in ein Bild-editor-Programm und greifen die Farben der textbox backgrond, Grenze, Farben etc. Dann kannst du es per CSS so:
```
input.readOnlyTextBox
{
    background-color: #F2F2F2 !important;
    color: #C6C6C6;
    border-color: #ddd;
}
```
Denken Sie jedoch daran, die Behinderte sehen geringfügig anders Aussehen kann von browser zu browser, aber das wird bekommen Sie eine Ungefähre deaktiviert look.

Ja, ich vermute, ohne den Umriss-Stil (es scheint IE7 nicht unterstützt) ich werde kämpfen. Es ist das "double" Grenze, die ich habe Probleme beim styling. :o(

InformationsquelleAutor Sunday Ironfoot
4

Disabled form-Elemente unterscheiden sich von browser zu browser. Wenn Sie nicht möchten, dass Ihre Website zu schauen inkonsequent und schlampig, dann sollten Sie Stil alle Ihre input-Elemente, oder zumindest alle deine Checkboxen - enabled, disabled und readonly. Dann können Sie bestimmen, was ein readonly input aussieht, ohne zu versuchen, vier oder fünf verschiedene Browser.

InformationsquelleAutor Scott Saunders
1

Ich will nicht die Kontrolle deaktiviert werden, da ich es brauche postback, also Im festlegen des readOnly-Attribut

Deaktiviert, und erstellen Sie ein hidden-input mit dem gleichen Namen mit dem gleichen Wert an die eigentliche Vorlage.

Es ist ein hack, aber nur so kann man zuverlässig die richtige 'deaktiviert' Aussehen in allen Browsern, ist es wirklich zu verwenden 'deaktiviert'. Das styling ist zu inkonsistent, Plattformen, browser, Einstellungen und Themen, für die Sie in der Lage sein, um es zu reproduzieren zuverlässig.

Sie schlägt messing mit CSS. Während wir auf fragwürdigen hacks, Sie könnte auch ermöglichen, die Felder kurz vor der Einreichung.

InformationsquelleAutor bobince
1

Ich denken kann, gibt es zwei Möglichkeiten.
1. Legen Sie eine "dummy" - deaktiviert-Feld oben auf das Feld mit der CSS-Positionierung. Auf diese Weise passt es, was Stil, den der browser verwendet. Wenn der Benutzer darauf klickt, Sie klicken in das Feld deaktiviert.
2. Ähnlich wie #1, verwenden Sie ein verborgenes Feld für den Wert abgegeben werden. Die "display" - Feld ist nur ein zusätzliches Feld für die Anzeige kann deaktiviert werden/aktiviert und wird ignoriert, für die Verarbeitung von Daten.
InformationsquelleAutor Brent Baisley
0

Fand ich diesen Kommentar auf einem verwandten Antwort:

Zu bekommen, die "nur Lesen" Eingabefeld, um zu SCHAUEN, wie die "deaktiviert" - Feld, set 'style="color: grey; background-color: #F0F0F0;"'. – Dan Nissenbaum Feb 28 '11 at 5:05

Habe ich es probiert, und es funktioniert perfekt!

Zusammenfassend:
```
style="color: grey; background-color: #F0F0F0;"
```
InformationsquelleAutor Jake Toronto
0

Ich weiß, das wurde beantwortet, aber wollte meine CSS-Beispiel.

Weil wenn ich war auf der Suche nach einer Lösung, wie man Stil ein Eingabefeld, sodass es aussah, als es deaktiviert war, ich landete immer mit einem Eingabefeld suchen, so wie dieser.

Mit dem border - left & top mit einer dunkleren Farbe etc.
So löste es mit diesem CSS-code.
```
input[readonly]{
  border-color: darkgrey;
  border-style: solid;
  border-width: 1px;
  background-color: rgb(235, 235, 228);
  color: rgb(84, 84, 84);
  padding: 2px 0px;
}
```
Gemacht jsfiddle, so dass Sie Jungs können einen genaueren Blick nehmen.

Es sieht gut aus in Chrome, auf anderen Browsern müssen Sie zum ändern der Farben abit. Wie in Firefox müssen Sie auch ändern Sie die Farbe und Hintergrund-Farbe, etc.
```
background-color: rgb(240, 240, 240);
color: rgb(109, 109, 109);
```
InformationsquelleAutor Devl11

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.