28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai la feuille de style suivante :

.main form {
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    background-color: #d6e5f4;
    padding: 10px;
    width: 500px;

}

.main input[type="text"], .main textarea {
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 4px;
    display: block;
    padding: 4px;
    border: solid 1px #85b1de;
    width: 300px;
    background-color: #EDF2F7;

}

.main textarea {
	height: 200px;

}

.main input[type="text"]:focus, .main textarea:focus {
    background-image: none;
    background-color: #ffffff;
    border: solid 1px #33677F;

}

.main select {
    font-family: Arial, Sans-Serif;
    font-size: 13px;
    margin-bottom: 4px;
    display: block;
    border: solid 1px #85b1de;
    width: 170px;
    background-color: #EDF2F7;

}

.filter {
    background-color: white;
    width: 350px;
    padding: 5px;

}

.search {
    background-color: white;
    width: 350px;
    margin-left: 500px;
    float: right;

}

.search input[type=text] {
	width: 200px;
	margin-left: 0px;
	display: inline;

}

.filter input[type=submit] {
	color: #3B6EBF;
	border:none;
	background-color: #fff;
	padding: 0;
	margin: 0;
	width: 6em;

}

.search input[type=submit] {
	width: 10em;
	display: inline;

}

J'ai défini un style général pour tous les formulaires dans "main" et des styles différents pour les formulaires "filter" et "search".

Mais ça ne fonctionne pas comme je voudrais : c'est toujours le style principal qui est appliqué.