Discussion :

[apt]

Bonjour à tous,

Comment obtenir un scrollbar avec un style flat (2D) dans textarea ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<form action="" method="post" name="search" id="styleform">
  <fieldset>
  <legend>Step 1 - Terms and Conditions of acceptation</legend>
  <textarea name="conditions" cols="" rows="" class="inp">
  1 - Conditions
  2 - Accept
  </textarea>
  <input name="Accept" type="button"  value="Accept" class="submit"/>
  <input name="Refuse" type="button"  value="Refuse" class="submit"/>
  </fieldset>
</form>

CSS :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
fieldset {
     font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	 font-size: 12px;
	 color: #33CCFF;
	 border: 1px solid #3399FF;
	 padding:2px;
     }
 
#styleform input.inp, textarea.inp
	{
	 border: 1px solid #ddd;
	 font: 11px arial,verdana, sans-serif;
	 color: #443;
	 padding: 2px;
	 text-indent: 1.2em;
	 outline: none;
	}
#styleform textarea.inp {
	 width: 89%;
	 height:150px;
	 overflow:scroll;
}
#styleform input.inp:hover, textarea.inp:hover,
#styleform input.inp:focus, textarea.inp:hover
	{ 
	 border: 1px solid #aaa; 	
	}

Merci

[herfrayg]

Qu'est ce que tu appelles un style flat ? Des exemples ?

[mdr_cedrick]

tu peux utiliser des choses dans ce genre là

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
textarea
{
scrollbar-face-color: #006400;
scrollbar-shadow-color: #228b22;
scrollbar-highlight-color: #98fb98;
scrollbar-3dlight-color: #8fbc8b;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #eee8aa;
}

mais il me semble que c'est seulement pour IE (6 ?)

[Erwan31]

mais il me semble que c'est seulement pour IE (6 ?)

Non ça marche aussi sur IE7 mais il vaut mieux placer ce genre de code dans une CSS pour IE appelée via commentaires conditionnels(faire une recherche sur ces termes) puisque c'est du code propriétaire Microsoft et donc invalidant pour la CSS.

[apt]

mdr_cedrick : Merci, mais ton exemple reste toujours en 3D et non en 2D (plat).

J'aimerais qu'il soit conforme aux bordures du textarea (border: 1px solid #ddd

[apt]

Je cherche depuis des heures sur le net pour trouver un cours une astuces ou un exemple, mais je n'ai rien trouver

Peut-être que quelqu'un d'entre vous a un lien ou un exemple sur son DD et qu'il puisse me le fournir ?

Merci.

[Bisûnûrs]

Il te suffit juste de changer les couleurs dans le code de mdr_cedrick. Par exemple, mettre les 3dlight dans les mêmes couleurs que le reste. J'ai l'impression que faire des tests par toi-même ne t'attire pas vraiment.

Au passage, c'est toujours uniquement pour IE, comme on l'a déjà fait remarquer.