Spry Css dropdown select menü font-size verändern

Chris_122 · 12. November 2019 um 04:04

Hallo Experten,

ich möchte gern die font size von dem initial Status (Anfangsansicht) verändern.
Kann mir da vielleicht jemand helfen?
Hab dass jetzt schon länger versucht, aber es funktioniert einfach nicht.

Hier ist der Css code für das Dropdown (select) Menü:
@charset „UTF-8“;

/* SpryValidationSelect.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* These are the classes applied on the messages
* (required message and invalid state message)
* which prevent them from being displayed by default.
*/
.selectRequiredMsg, .selectInvalidMsg {
display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states (required, invalid).
* These classes set a default red border and color for the error text.
* The state class (.selectRequiredState or .selectInvalidState) is applied on the top-level container for the widget,
* and this way only the specific error message can be shown by setting the display property to „inline“.
*/
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg {
display: inline;
color: #CC3333;
}

/* The next three group selectors control the way the core element (SELECT) looks like when the widget is in one of the states:
* focus, required / invalid, valid
* There are two selectors for each state, to cover the two main usecases for the widget:
* - the widget id is placed on the top level container for the SELECT
* - the widget id is placed on the SELECT element itself (there are no error messages)
*/

/* When the widget is in the valid state the SELECT has a green background applied on it. */
.selectValidState select, select.selectValidState {
background-color: #B8F5B1;
}

/* When the widget is in an invalid state the SELECT has a red background applied on it. */
select.selectRequiredState, .selectRequiredState select,
select.selectInvalidState, .selectInvalidState select {
background-color: #FF9F9F;
}

/* When the widget has received focus, the SELECT has a yellow background applied on it. */
.selectFocusState select, select.selectFocusState {
font-size:18px;
background-color: #FCFCFC;

}
.blau {
color: #00C;
}
.ab {
font-size: 18px;
font-weight: bold;
}
.bc {
font-size: 18px;
font-weight: bold;
}

Lg,
Chris

Anja_a3d12b · 12. November 2019 um 04:06

Hallo

ich möchte gern die font size von dem initial Status
(Anfangsansicht) verändern.
Kann mir da vielleicht jemand helfen?
Hab dass jetzt schon länger versucht, aber es funktioniert
einfach nicht.

Hier ist der Css code für das Dropdown (select) Menü:
(…)

Mir persönlich ist das Posten des CSS zu wenig. Das zugehörige HTML würde hier noch helfen. Zudem ist Spry ja, soweit ich weiß, eine Lösung mit JavaScript (Ajax), also müsste man u.U. auch den JavaScript-Teil analysieren(?). Weiterhin ist das Spry Framework laut Adobe immer noch Beta-Status. Wer weiß, welche Fehler da noch drin stecken?

Gruß
Anja

PS:
Kleine Besserwisserei am Rande:
Warum eigentlich Spry verwenden, wenn reine HTML/CSS-Lösungen ähnliches bieten können und dann auch wirklich bei allen Grafikbrowsern funktionieren? Mir z.B. erscheinen bei „schlechten“ Webseiten immer wieder mal die vollständig aufgeklappten Menüstrukturen über die Hälfte des Bildschirminhalts verteilt, nur weil JavaScript statt einer reinen HTML/CSS-Lösung verwendet wurde und dies von meinem Browser für unbekannte Seiten nicht ausgewertet wird. Das sorgt dann meist dafür, dass mir diese Seiten auch in Zukunft unbekannt bleiben, weil ich sie nicht weiter besuchen werde.

Chris_122 · 12. November 2019 um 04:06

Hallo Anja,

danke für die schnelle AW. Hier ist noch der htmlcode:

Wählen Sie ein Element aus.

<!–
var spryselect1 = new Spry.Widget.ValidationSelect(„spryselect1“);
//–>

Der Javascript code ist leider zu lang zum einfügen. Soviel ich aber rauslesen konnte hat dieser mit der FONT-SIZE nichts zu tun.
Weiters bin ich darauf gekommen, dass ich wenn ich in das Select div class=„selectFocusState“ schreibe dass die Größe sich dem CSS code select Focus State anpasst.
Jedoch hab ich das Menü öfters schon verwendet und will mir das ersparen, dass ich jedesmal class… dazu schreibe.

Lg,
Chris

Anja_a3d12b · 12. November 2019 um 04:06

Hallo.

danke für die schnelle AW. Hier ist noch der htmlcode:
(…)

Puh… das sieht schlimmer aus, als ich dachte.

Versuche mal das Folgende im CSS-Block:

select#menu option {
font-size: 3em;
border: 3px solid red;
background-color: blue;
}

Rahmen (border) und Hintergrundfarbe (background-color) habe ich nur so zum Testen mit drin und können letztlich wieder raus.

Du hast in deinem Codeschnipsel zwar kein option-Tag drin, aber zu einer Select-Liste gehören auch Options, die als Auswahlpunkte erscheinen sollen, und diese kann man mit CSS formatieren - zumindest in Nicht-Spry-Versionen.

Gruß
A

Chris_122 · 12. November 2019 um 04:07

Hey,

danke hab es versucht auf die unterschiedlichsten Möglichkeiten, hat aber trotzdem nicht geholfen. Jetzt hab ich mir den javascript code nochmals genauer durchgelesen und hab dann die unterschiedlichen Classes gefunden. Hier ist der code, die Classen hab ich mit vielen Sternen markiert.

var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.ValidationSelect = function(element, opts)
{
this.init(element);

Spry.Widget.Utils.setOptions(this, opts);

// set validateOn flags
var validateOn = [‚submit‘].concat(this.validateOn || []);
validateOn = validateOn.join(",");
this.validateOn = 0 | (validateOn.indexOf(‚submit‘) != -1 ? Spry.Widget.ValidationSelect.ONSUBMIT : 0);
this.validateOn = this.validateOn | (validateOn.indexOf(‚blur‘) != -1 ? Spry.Widget.ValidationSelect.ONBLUR : 0);
this.validateOn = this.validateOn | (validateOn.indexOf(‚change‘) != -1 ? Spry.Widget.ValidationSelect.ONCHANGE : 0);

if (this.additionalError)
this.additionalError = this.getElement(this.additionalError);

// Unfortunately in some browsers like Safari, the Stylesheets our
// page depends on may not have been loaded at the time we are called.
// This means we have to defer attaching our behaviors until after the
// onload event fires, since some of our behaviors rely on dimensions
// specified in the CSS.

if (Spry.Widget.ValidationSelect.onloadDidFire)
this.attachBehaviors();
else
Spry.Widget.ValidationSelect.loadQueue.push(this);
};

Spry.Widget.ValidationSelect.ONCHANGE = 1;
Spry.Widget.ValidationSelect.ONBLUR = 2;
Spry.Widget.ValidationSelect.ONSUBMIT = 4;

Spry.Widget.ValidationSelect.prototype.init = function(element)
{
this.element = this.getElement(element);
this.additionalError = false;
this.selectElement = null;
this.form = null;
this.event_handlers = [];

// this.element can be either the container ()
// or the element, when no error messages are used.
**************************************************************
***** this.requiredClass = „selectRequiredState“;
***** this.invalidClass = „selectInvalidState“;
***** this.focusClass = „selectFocusState“;
***** this.validClass = „selectValidState“;
**************************************************************
this.emptyValue = „“;
this.invalidValue = null;
this.isRequired = true;

this.validateOn = [„submit“]; // change, blur, submit
// flag used to avoid cascade validation when both
// onChange and onBlur events are used to trigger validation
this.validatedByOnChangeEvent = false;
};

Spry.Widget.ValidationSelect.prototype.destroy = function() {
if (this.event_handlers)
for (var i=0; i= 6) {
focusEventName = „beforeactivate“;
}
}
this.event_handlers.push([this.selectElement, focusEventName, function(e) { if (self.isDisabled()) return true; return self.onFocus(e); }]);
// blur
this.event_handlers.push([this.selectElement, „blur“, function(e) { if (self.isDisabled()) return true; return self.onBlur(e); }]);
// change
if (this.validateOn & Spry.Widget.ValidationSelect.ONCHANGE) {
this.event_handlers.push([this.selectElement, „change“, function(e) { if (self.isDisabled()) return true; return self.onChange(e); }]);
this.event_handlers.push([this.selectElement, „keypress“, function(e) { if (self.isDisabled()) return true; return self.onChange(e); }]);
}

for (var i=0; i 0 &&
this.selectElement.selectedIndex != -1 &&
this.selectElement.options[this.selectElement.selectedIndex].value == this.invalidValue) {
this.addClassName(this.element, this.invalidClass);
this.addClassName(this.additionalError, this.invalidClass);
return false;
}
}
this.addClassName(this.element, this.validClass);
this.addClassName(this.additionalError, this.validClass);
return true;
};

Spry.Widget.ValidationSelect.prototype.isDisabled = function() {
return this.selectElement.disabled;
};

//////////////////////////////////////////////////////////////////////
//
// Spry.Widget.Form - common for all widgets
//
//////////////////////////////////////////////////////////////////////

if (!Spry.Widget.Form) Spry.Widget.Form = {};
if (!Spry.Widget.Form.onSubmitWidgetQueue) Spry.Widget.Form.onSubmitWidgetQueue = [];

if (!Spry.Widget.Form.validate) {
Spry.Widget.Form.validate = function(vform) {
var isValid = true;
var isElementValid = true;
var q = Spry.Widget.Form.onSubmitWidgetQueue;
var qlen = q.length;
for (var i = 0; i