CSS => border

Door Mark L op 26-12-2006 22:48

437 views

Ik heb een style.css waarin staat:


textarea, select, input{
font-family: MS Sans Serif;
font-size: 10pt;
background: white;
border: 1px solid #C0C0C0;
}

De border word dus in IE bij elk inputvenster gedaan, ook de checkboxjes en de radiobuttons.

Is er een manier om die border alsnog uit te zetten zonder de rest aan te passen?
Of hoe haal ik die border bij de checkboxjes en radiobuttons weg?

Jan Koehoorn

26-12-2006 22:55

textarea, select, input.border {
font-family: MS Sans Serif;
font-size: 10pt;
background: white;
border: 1px solid #C0C0C0;
}
En dan bij je inputs type text:

<input class="border" type="text" enz

Mark L

26-12-2006 22:59

Ja, daar dacht ik ook aan, maar ik heb ongeveer 10 checkboxjes/radiobuttons op m'n hele site (iets van 4 pag's met checkboxjes/radiobuttons) en de rest is zonder.

En om dan bij alle pagina's dit te veranderen...

Maar als ik dit nou alleen gebruik bij de sites waar het nodig is....

Bedankt!!

Jan Koehoorn

26-12-2006 23:04

Dan doe je het toch gewoon met JavaScript?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>JavaScript CSS</title>
	<script type="text/javascript">
		function init () {
			var x = document.getElementsByTagName ('input');
			var n = x.length;
			for (i = 0; i < n; i++) {
				if (x[i].type == 'text') {
					x[i].className = 'border';
				}
			}
		}
		window.onload = init;
	</script>
	<style type="text/css">
		input.border {
			border: 1px solid red;
		}
	</style>
</head>

<body>
	<form method="post" action="#">
		<input type="text">
		<input type="text">
		<input type="text">
		<input type="text">
		<input type="text">
		<input type="text">
		<input type="text">
		<input type="radio">
		<input type="checkbox">
	</form>
</body>
</html>

[edit]Check hier voor een voorbeeld van het script[/edit]

Mark L

26-12-2006 23:10

Sorry, als er 1 ding is wat ik niet/nauwelijk wil gebruiken (en dus ook niet gebruik) is dat JavaScript.

ik heb nu op een pagina die steeds geïnclude word dit neergezet:


<?php
if ($style == 1) {
$style = '.submit';
}
else {
$style = 'input';
}
?>
<style>
textarea, select, <?php echo $style; ?>{
border: 1px solid #C0C0C0;
}
</style>

.submit word dan voor de textjes en als er geen checkboxjes of radiobuttons inzitten, zal $style automatisch 'input' worden.

Hoe de eerste $style is gezet? boven de include:
<?php
$style = '1';
include();
?>

Edit:
Typo

Legolas

26-12-2006 23:12

waarom dan niet juist een border loze class bij checkboxen als dat wel haalbaar is?

Jan Koehoorn

26-12-2006 23:16

Mark schreef op 26.12.2006 23:10
Sorry, als er 1 ding is wat ik niet/nauwelijk wil gebruiken (en dus ook niet gebruik) is dat JavaScript.

En de reden?

Mark L

26-12-2006 23:24

@ Jan:
Vroeger slechte ervaringen mee gehad + je kan 't uitzetten (maar dat is nu geen reden doordat je dan alleen maar een iets minder mooiere website krijgt)
Ik hoor ook veel mensen:


Zo min mogelijk Javascript op je site doen!

@ Legolas:
Hoe doe je dat dan?

Jan Koehoorn

26-12-2006 23:28

@ Mark:

1) vroeger slechte ervaringen mee gehad
Ik neem aan dat je dus ook niet meer achter de vrouwen aan gaat?

2) je kan 't uitzetten
Inderdaad. Je kunt CSS en images ook uitzetten. JavaScript gebruik je dus niet voor beveiliging en dergelijke. Maar voor een probleem als dit is het prima geschikt.

3) Ik hoor ook veel mensen: "Zo min mogelijk JavaScript op je site doen!"
Waarom? JavaScript is een prachtige taal die het voordeel heeft dat hij client-side uitgevoerd wordt waardoor een page-reload niet nodig is. Bij deze reden zit geen onderbouwing.

Mark L

26-12-2006 23:40

Jan Koehoorn schreef op 26.12.2006 23:28
@ Mark:

1) vroeger slechte ervaringen mee gehad
Ik neem aan dat je dus ook niet meer achter de vrouwen aan gaat?

2) je kan 't uitzetten
Inderdaad. Je kunt CSS en images ook uitzetten. JavaScript gebruik je dus niet voor beveiliging en dergelijke. Maar voor een probleem als dit is het prima geschikt.

3) Ik hoor ook veel mensen: "Zo min mogelijk JavaScript op je site doen!"
Waarom? JavaScript is een prachtige taal die het voordeel heeft dat hij client-side uitgevoerd wordt waardoor een page-reload niet nodig is. Bij deze reden zit geen onderbouwing.

1). 't Ging vroeger al mis, maar een tijdje geleden (maand o.i.d.) dacht ik ook weer eens zoals punt 3 (wat wel zo is) dus ik dacht: Ik ga een cursus (online) volgen.
Ik zoek een online cursus op, lees 't goed, probeer 't te begrijpen (lukte wel aardig) probeer een paar voorbeelden... waarvan geen een het deed... (behalve de alert en de document.write)
gewoon letterlijk gekopieerd! Ja, dan ga ik toch denken dat het óf alleen voor IE is (op m'n site word aangeraden FF te nemen, dus dat is niet handig) óf dat Javascript/die cursus verouderd.

Ik probeerde ook een AJAX-Cursus te vinden, maar daarvan kon ik er niet een vinden.

2). Dat weet ik, daarom zei ik dat dat bij deze niet van toepassing is.

3). Ja, dat non-pagereload is zeker handig! Je hebt helemaal gelijk.

Jan Koehoorn

26-12-2006 23:46

Voor wat betreft punt 1: dan heb je inderdaad een slechte cursus gevolgd. JavaScript is niet moeilijk te leren. Je hoeft maar een paar dingen in de gaten te houden:

1) Houdt je JS (net als CSS) buiten je HTML. Zet het liefst in een extern bestand, of in de <head> sectie

2) Geef de HTML elementen die je met JavaScript wilt benaderen altijd een uniek id. De enige uitzondering hierop is, dat je een hele serie elementen van hetzelfde type wilt benaderen (zoals in het voorbeeld dat ik je gaf)

Tip: bezoek de website van Peter Paul Koch als je iets van JavaScript wilt leren.

Reageren

Inloggen om te reageren