Εμφάνιση πλαισίου όταν είναι επιλεγμένο το search box

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
poscore
Δημοσιεύσεις: 63
Εγγραφή: 06 Μάιος 2012 02:48
Επικοινωνία:

Εμφάνιση πλαισίου όταν είναι επιλεγμένο το search box

Δημοσίευση από poscore » 12 Οκτ 2013 17:30

Καλησπέρα παιδιά,

δεν ξέρω αν είναι θέμα CSS η HTML αλλά έχω ένα μικρό θεματάκι. Όταν επιλέγω το search box όπως φαίνεται στην εικόνα παρακάτω μου βγαίνει ένα orange περίγραμμα γύρω γύρω...δεν ξέρω απο που είναι είναι αυτό αλλά θέλω να μην υπάρχει. Μπορώ να κάνω κάτι? :/



σας ευχαριστώ πολύ!

HTML

Κώδικας: Επιλογή όλων

<div id="search_box">
					<form method="get" action="/search" id="search">
						<input name="q" type="text" size="40" placeholder="Search..." />
					</form>
				</div>
CSS

Κώδικας: Επιλογή όλων

#search_box &#123;
	//background&#58; red;
	
	width&#58; 150px;
	height&#58; 30px;
	color&#58; black;
	font-size&#58; 16px;
	font-family&#58; Arial;
	font-weight&#58; bold;
	text-align&#58; right;
	
	margin-left&#58; 650px;
	margin-top&#58; 10px;
	
	float&#58; left&#58; 
&#125;

#search &#123;

&#125;

#search input&#91;type="text"&#93; &#123;
    background&#58; url&#40;search-dark.png&#41; no-repeat 10px 6px #444;
    border&#58; 0 none;
    font&#58; bold 12px Arial,Helvetica,Sans-serif;
    color&#58; white;
    width&#58; 150px;
    padding&#58; 10px 15px 10px 35px;
    -webkit-border-radius&#58; 20px;
    -moz-border-radius&#58; 20px;
    border-radius&#58; 20px;
    text-shadow&#58; 0 2px 2px rgba&#40;0, 0, 0, 0.3&#41;;
    -webkit-box-shadow&#58; 0 1px 0 rgba&#40;255, 255, 255, 0.1&#41;, 0 1px 3px rgba&#40;0, 0, 0, 0.2&#41; inset;
    -moz-box-shadow&#58; 0 1px 0 rgba&#40;255, 255, 255, 0.1&#41;, 0 1px 3px rgba&#40;0, 0, 0, 0.2&#41; inset;
    box-shadow&#58; 0 1px 0 rgba&#40;255, 255, 255, 0.1&#41;, 0 1px 3px rgba&#40;0, 0, 0, 0.2&#41; inset;
    -webkit-transition&#58; all 0.7s ease 0s;
    -moz-transition&#58; all 0.7s ease 0s;
    -o-transition&#58; all 0.7s ease 0s;
    transition&#58; all 0.7s ease 0s;
    &#125;

#search input&#91;type="text"&#93;&#58;focus &#123;
    width&#58; 250px;
&#125;
Συνημμένα
problem.png
problem.png (2.76 KiB) Προβλήθηκε 22009 φορές

Άβαταρ μέλους
fafos
Script Master
Δημοσιεύσεις: 6230
Εγγραφή: 30 Νοέμ 2004 03:09

Εμφάνιση πλαισίου όταν είναι επιλεγμένο το search box

Δημοσίευση από fafos » 12 Οκτ 2013 18:11

fysiologika sto vgazei ston chrome kai ston safari (mple)..

vazeis outline:0; sto #search input[type="text"]
Οι πάνες και οι πολιτικοί πρέπει να αλλάζονται συχνά για τον ίδιο λόγο...

poscore
Δημοσιεύσεις: 63
Εγγραφή: 06 Μάιος 2012 02:48
Επικοινωνία:

Εμφάνιση πλαισίου όταν είναι επιλεγμένο το search box

Δημοσίευση από poscore » 12 Οκτ 2013 18:19

Σε ευχαριστώ πάρα πολύ!

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες