Obtenir un effet flat sur une scrollbar

Version imprimable

Bonjour à tous,

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

Code:

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:

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 :)

16/12/2008, 17h37
herfrayg

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

tu peux utiliser des choses dans ce genre là

Code:

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 ?)

16/12/2008, 17h52
Erwan31

Citation:

Envoyé par mdr_cedrick

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.
16/12/2008, 19h05
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;)

:mrgreen:
17/12/2008, 01h24
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.
17/12/2008, 09h07
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.
17/12/2008, 21h18
apt

Bonsoir Bisûnûrs,

Citation:

Envoyé par 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.

Oui je l'ai fait, mais la bordure est loin d'être fine :roll:

Citation:

J'ai l'impression que faire des tests par toi-même ne t'attire pas vraiment.

Ce n'est le cas, parce que j'attendais de voir une propriété border pour le scrollbar, sur laquelle je peux avoir une bordure de 1px à la fin.

Le changement des couleurs, je n'avais pas pensé, puisque je me suis concentré dans ma recherche, comme dis au dessus, de trouver une propriété border de l'ascenseur.

C'est tout ;)

Voila le code a qui veut l'essayer :

Code:

1
2
3
4
5
6
7
8
9
10
11
textarea
{
scrollbar-style-border:1px solid;
scrollbar-face-color: #fff; 
scrollbar-arrow-color: #ddd000;
scrollbar-track-color: #fff; 
scrollbar-3dlight-color: #ddd; 
scrollbar-darkshadow-color: #ddd; 
scrollbar-highlight-color: #ddd;
scrollbar-shadow-color: #ddd;
}

Citation:
Envoyé par apt
Voila le code a qui veut l'essayer :
Code:

1 2 3 4 5 6 7 8 9 10 11 textarea { scrollbar-style-border:1px solid; scrollbar-face-color: #fff; scrollbar-arrow-color: #ddd000; scrollbar-track-color: #fff; scrollbar-3dlight-color: #ddd; scrollbar-darkshadow-color: #ddd; scrollbar-highlight-color: #ddd; scrollbar-shadow-color: #ddd; }
:D
Résultat :

Très joli sur IE6 + Win XP
Encore en 3D sous Firefox 3 + Win XP

:?

18/12/2008, 12h22
Erwan31

Citation:

Envoyé par jml94

[*]Très joli sur IE6 + Win XP[*]Encore en 3D sous Firefox 3 + Win XP

Tu oublies tous les autres navigateurs alternatifs (Opera, Safari, Omniweb, Seamonkey...) ;) IE7 aussi le prend en compte.
18/12/2008, 12h24
s.n.a.f.u

Citation:

Envoyé par Erwan31

Tu oublies tous les autres navigateurs alternatifs (Opera, Safari, Omniweb, Seamonkey...) ;) IE7 aussi le prend en compte.

:cry:

Hélas, je ne les oublie pas, mais dans la journée je suis sur une bouse... :vomi:
18/12/2008, 18h20
devyan

Salut,

Dans le genre Hack CSS il n'y a rien de pire que de vouloir personnaliser les scrollbars :aie:

Chaque navigateur ayant son propre "skin" pour la représentation des éléments de formulaire et les scrollbars... :arf:
21/12/2008, 02h01
apt

Bonjour le forum,

Je crois que l'effet voulu est obtenu en utilisant du Flash comme j'ai vu sur quelques sites ...
21/12/2008, 17h23
Deallyra

Alors rediriges toi vers la section Flash de Developpez.