pole select

0

Cześć, zrobiłem poprzez selecta pole rowijane z kilkoma danymi. Chciałbym jednak żeby label był nad polem rozwijanym a nie z jego lewej strony. Próbuję się dostać do tego przez cssa ale nie za bradzo mi wychodzi, zobaczcie kawałek kodu html: wiersz od 9 do 15.

				<div class="kol kol-pole">
					<div class="form">
						<label class="mail">e-mail <input type="text"></label>
					</div>
					<div class="form">
						<label class="fibu">ID <input class="fibu" type="text" disabled></label>
					</div>
					<div class="form">					
						<label for="kraj_nadania">kraj nadania</label>
						<select id="kraj_nadania">
							<option value="kraj1">Niemcy</option>
							<option value="kraj2">Francja</option>							
							<option value="kraj3">Węgry</option>
							<option value="kraj3">Polska</option>							
						</select>						
					</div>
					<div class="form">					
						<label for="kraj_dostawy">kraj dostawy</label>
						<select id="kraj_dostawy">
							<option value="kraj1">Niemcy</option>
							<option value="kraj2">Francja</option>							
							<option value="kraj3">Węgry</option>
							<option value="kraj3">Polska</option>							
						</select>							
					</div>	
					<div class="form">	
						<label for="serwis">serwis dodatkowy</label>
						<select id="serwis">
							<option value="priority">Priority</option>
							<option value="normal">Normal</option>							
							<option value="fast">Fast</option>
						</select>
					</div>
					<div class="form">
						<label class="adr">ADR <input type="checkbox" value="tak"></label>
					</div>					
				</div>
				<div class="kol kol-pole">
					<div class="form">
						<label class="klient">nazwa klienta <input class="klient" type="text" disabled></label>
					</div>
					<div class="form">					
						<label class="zaleglosci">zaległości <input class="zaleglosci" type="text" disabled></label>	
					</div>
					<div class="form">
						<label class="kod_nadania">kod nadania <input class="kod" type="text"></label>
					</div>
					<div class="form">
						<label class="kod_dostawy">kod dostawy <input class="kod" type="text"></label>
					</div>
					<div class="form">				
						<label class="TT">TT <input class="TT" type="text" disabled></label>
					</div>					
				</div>

a mój css pod tego selecta:

.kol	{
		position:relative;
		float:left;
	}	

.kol-pole	{
		width:32%;
	}

.form label .kraj_dostawy	{
			display: inline-block;
		width: 70px;	
	}	

dla innych labeli ustawiam w css-ie j.w i ładnie mi ustawia label nad polem teksowym:

.form label.TT	{
			display: inline-block;
		width: 28px;
	}

input.TT	{
background-color:#b6b5b5;
width:28px;
}

Czy w zły sposób dostaję się do labela w selekcie aby go zmienić?
Czy mogę zmienić wygląd pola rozwijanego? Np. zeby nie miał scian bocznych czy nie ma takie opcji?

0

Odnośnie zmiany/stylowania samej listy rozwijalnej - rzuć okiem na https://codepen.io/ericrasch/pen/zjDBx

Z tego co kojarzę - możesz zmieniać styl/formatowanie listy, ale w postaci nierozwiniętej (np. dodając w CSS css border:0px; outline:0px; ), natomiast za bardzo nie masz wpływu na to, co się stanie z listą po jej rozwinięciu (w zakresie usunięcia ramki). Rzuć okiem na http://wpandsuch.com/how-to-style-form-select-with-jquery-css-plugins/ - jest tam wiele różnych przykładów list rozwijalnych w oparciu o jquery i z tego co widzę, wszystkie mają ramki/obwódki.

Co do przeniesienia napisu nad listę - jeśli do wieczora nic się w temacie nie ruszy, to postaram się rzucić okiem.

0

Ok, dzieki za podrzucenie styli. Chodzi mi tylko o ostylowanie pola przed rozwinięciem, po rozwinięciu lista może być domyślna. Pracuje nad tym przeniesieniem napisu nad listę ale póki co nie wychodzi.

1

dodaj do swojego CSS

    label, input {display: block;}

oraz popraw/wywal ze stylu .form label.kraj_dostawy informację o css display:inline-block , a następnie powiedz, czy o taki efekt Ci chodziło.

screenshot-20180406133134.png

Poza tym jeszcze bym usunął tego css float:left i zamiast tego w definicji stylu .kol dałbym css display: inline-block;

0

dziala:) dzięki

1 użytkowników online, w tym zalogowanych: 0, gości: 1