✔ width input type search arbeitet nicht

kosovafan

kosovafan

Erfahrenes Mitglied
Hallo,

ich versuche verzweifelt die Weite des input fields type search einzustellen. Tausende Werte und Ergebnisse durchprobiert. Aber irgendwie will es einfach nicht funktionieren. Siehe Bild.

Cache gelerrt, Webrowser gewechselt, aber kein Erfolg. Hat jemand Rat?

Mfg

CSS: 
.search {
    position: absolute;
    top: 1em;
    right: 1em;
    display: block;
}

.search fieldset {
    border: 0;
}

input[type=search] {
    -moz-appearance:none;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    height: 1.5em;
    width: 5em;
}
 

Anhänge

  • Bildschirmfoto_2015-09-14_01-09-52.png
    Bildschirmfoto_2015-09-14_01-09-52.png
    25,4 KB · Aufrufe: 13
Hallo,

hmm bei mir funktioniert das nicht Chrome und Firefox weigern sich. Ich hänge mal das css an, eventuell liegt es an irgendwas davor.

Mfg
Silvio

CSS: 
@charset "UTF-8";

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}


/* fonts */
@font-face {
    font-family: 'DroidSans';
    src: url('../fonts/droidsans-webfont.eot');
    src: url('../fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/droidsans-webfont.woff2') format('woff2'),
         url('../fonts/droidsans-webfont.woff') format('woff'),
         url('../fonts/droidsans-webfont.ttf') format('truetype'),
         url('../fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'inconsolata';
    src: url('../fonts/inconsolata-webfont.eot');
    src: url('../fonts/inconsolata-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/inconsolata-webfont.woff2') format('woff2'),
         url('../fonts/inconsolata-webfont.woff') format('woff'),
         url('../fonts/inconsolata-webfont.ttf') format('truetype'),
         url('../fonts/inconsolata-webfont.svg#inconsolatamedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'blokletters';
    src: url('../fonts/blokletters-balpen-webfont.eot');
    src: url('../fonts/blokletters-balpen-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/blokletters-balpen-webfont.woff2') format('woff2'),
         url('../fonts/blokletters-balpen-webfont.woff') format('woff'),
         url('../fonts/blokletters-balpen-webfont.ttf') format('truetype'),
         url('../fonts/blokletters-balpen-webfont.svg#blokletters_balpenbalpen') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* font awesome */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.3.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* basic */
html {
    height: 100%;
    font-size: 100%;
    overflow-y: scroll;
    -webkit-text-size-adjust: 100%
}

body {
    font-family: arial, helvetica, sans-serif;
    font-size: 100%;
    line-height: 1.5em;
    margin: 0;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* header  */
header {
    background: url("../img/layout/gradient.png") repeat-x;
    padding-bottom: 1em;
}

header figure  {
    margin: 0;
    padding: 1em 0 0 1em;
}

header figure a {
    text-decoration: none;
    outline: none;
}

.logo {
    width: 115px;
    height: 90px;
    background: url("../img/layout/logo.png") no-repeat left;
    display: block;
    margin: 0;
    padding: 0;
}

.search {
    position: absolute;
    top: 1em;
    right: 1em;
    display: block;
}

.search fieldset {
    border: 0;
}


input[type=search] {
    -moz-appearance:none;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    height: 1.5em;
    width: 5em;
}

/* navigation */
nav {
    padding-top: 1em;
}

nav ul li {
    display: inline-block;
    font-size: 1.3em;
    padding: 0 1em 0 0em;
    border-right: thin solid black;
}

nav ul li:last-child {
    border: none;
}

nav ul li a {
    color: white;
}

nav ul li a:hover {
    color: #82b5d0;
}


/* media querries */
@media only screen and (max-width: 480px) {

}


@media only screen and (min-width: 380px) {
    header .search input {
        width: 15em;
    }
}

@media only screen and (min-width: 786px) {
    .search {
        padding-left: 3em;
    }

    nav {
        position: absolute;
        top: 1.3em;
        right: 1em;
    }

    nav ul li {
        font-size: 1.5em;
    }
}

/* helper */
p {
    font-family: "DroidSans";
}

h1,
h2,
h3 {
    font-family: "blokletters";
}

img, object, embed {
    max-width: 100%;
    height: auto;
}

ul li {
    margin: 0;
    padding: 0;
}

li {
    list-style-type: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}

.fa-user:before {
  content: "\f007";
  color: white;
}

.fa-envelope:before {
  content: "\f0e0";
  color: white; 
}

.fa-sign-in:before {
  content: "\f090";
  color: white; 
}

.fa-search:before {
  content: "\f002";
  padding-right: 0.5em;
  color: white;
}

.fa-twitter:before {
  content: "\f099";
}

.fa-hacker-news:before {
  content: "\f1d4";
}

.fa-calendar:before {
  content: "\f073";
}

h1,
h2,
h3 {
    font-family: "blokletters"
}

p {
    font-family: "DroidSans";
}

aside {
    font-family: "inconsolata";
}

a {
    text-decoration: none;
}

li {
    list-style-type: none;
}

.white {
    background: #e6e6e5;
}

.box ul li {
    padding-bottom: 1em;
}

.flt-right {
    float: right;
}

.flt-left {
    float: left;
}

.flt-clear {
    clear: both;
}
 
Ohne den Code der HTML-Seite ist das CSS aussagelos ;)

Zeig also bitte auch mal den Code der HTML-Seite. Wohlmöglich liegt hier die Ursache, z.B. ein Tippfehler beim Attribut type="search", oä.
 
Hallo,

ich habe es auch ohne Webserver probiert, klappt auch nicht.

Mfg

HTML: 
<header>
<figure>
<a href="/" class="logo"></a>
</figure>

<div class="search"> 
<form method="get" action="http://www.google.com/search">
<input type="hidden" name="sitesearch" value="silviosiefke.com">
<fieldset>
<span class="fa fa-search"></span>
<input type="search" class="stext" results="5" autosave="siefkesearch" name="q">
</fieldset>
</form> 
</div>   

<nav>
<ul>
<li>
<span class="fa fa-user"></span>
<a href="/about/"> about</a>
</li>

<li>
<span class="fa fa-sign-in"></span>
<a href="/work/"> work</a>
</li>               

<li>
<span class="fa fa-envelope"></span>
<a href="/contact/"> mail</a>
</li>
</ul>
</nav>
</header>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück