Wie änder ich den style bei html input type number?

Das Problem ist nicht, die Height oder Width zu verändern, sondern dieses komische Teil, dass immer rechts in der Box ist, mit der man die Zahl verändern kann. Dieses Ding bleibt nicht proportional zu der Höhe des Inputs. Wie kann ich das ändern?

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Programm, HTML

05.08.2018, 15:41

Die beiden Pfeile sind nicht änderbar, du könntest sie höchstens ausblenden und eigene Elemente einfügen. Ein Beispiel findet sich hier.

DerFlo735

05.08.2018, 14:43

  <input type="number" style="height: 200px" />

Ähnliche Beiträge

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zum Beitrag

HTML input textfeld type=number nachkommastellen

welchen type muss man in html einem input textfeld zuweisen, sodass es nur zahlen mit 2 nachkommastellen akzeptiert?

mit type="number" kommt bei mir immer ungültiger wert wenn ich kommazahlen eingebe. sowohl mit . als auch mit ,

...zum Beitrag

Bild in div?

Hi ich möchte ein bild in mein div hinzufügen und es soll oben genau in das div passen ohne rand aber irgendwie bleibt dort immer ein weißer rand.

Hier ein stück meines Html code:

                <section class="boxes">
                    <div class="buybox">
                        <img src="blume/sonnenblume.jpg">
                    </div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                    <div class="buybox"></div>
                </section>

Hier ein Stück von CSS:

div {
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
}
.boxes{
    display: flex;
    flex direction: row;
}
.buybox{
    width: 400px;
    height: 420px;
    background: white;
    margin: 25px;
    box-shadow: 0 0 30px rgba(0, 0, 0, .2);
    border-radius: 20px;
    position: relative;
    
}
.buybox img{
    border-radius: 20px;
    height: auto ;
    width: 100% ;
    box-sizing: border-box;
    margin: 0;
}
.buybox:hover{
    transition: .2s;
    background: #E6E6E6;
}

...zum Beitrag

Wieso ändert sich bei height und width nur die Position des Elements?

Hallo zusammen,

ich versuche mit CSS meinen Slider höher bzw. breiter zu stellen (mit width und height).

Leider ändert sich nur die Position des Sliders. Weiß jemand, wo das Problem ist bzw. wie man es beheben kann?

Es ist ein .slider bei CSS und ich benutze VS, falls diese Info relevant sein sollte.

...zum Beitrag

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zum Beitrag

CSS bei Hover anderes Element verändern?

Ganz ohne JavaScript

Mit dem Code unten kann ich beim hovern auf container1 die Hintergrundfarbe von container2 ändern weil er in container1 drinnen ist

aber geht es nicht auch so das ich den Body Hintergrund auf grün oder so ändern kann ?

    #container1{
            height: 50vh;
            background-color: blue;
        }
        #container2{
            height: 25vh;
            width: 100%;
            background-color: red;
        }
        #container1:hover #container2{
            background-color: green;
        }
    <div id="container1">
            <div id="container2"></div>
    </div>

...zum Beitrag

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zum Beitrag

HTML & CSS Button-breite anpassen?

Hey, im voraus möchte ich schonmal erwähnen das ich hier absoluter Neuling bin.

Seit ein paar Tagen "spiele" ich etwas mit HTML und CSS herum, ich hab einen Button eingefügt dem ich ein img hinzugefügt habe, nun bekomme ich die Breite des Buttons aber nicht angepasst, entweder es ändert sich garnichts oder der Button bedeckt die vollständige Seite.

Ist es überhaupt möglich den Buttn in % zu skalieren oder muss ich mit px arbeiten?

Hoffe mich kann jemand aufklären :)

Habe mir das ganze nochmal angeschaut, macht den Eindruck als würde "width" vollständig ignoriert. Wenn ich "height" verändere passt sich "width" automatisch an um die Proportionen beizubehalten.

...zum Beitrag

HTML Seite verschiebt bei Verkleinerung?

Hallo, ich bin Anfänger was HTML und CSS angeht und habe meine erste Website fürs erste fertig. Nun bin ich beim verkleinern des Windows auf das Problem gestoßen, dass sich die Objekte verschieben und unteranderem auch Überlappen...

Wie kann ich dem entgegen steuern? Gibt es da eine Möglichkeit?

...zum Beitrag

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zum Beitrag

html Unterschrift in die pdf einfügen?

<div class="row">
 <div class="panel">
  <div class="panel-body">
   <div class="col-xs-12">
    <div class="form-group">
     <label for="Unterschrift_1"><b>Unterschrift Fachkraft für Arbeitssicherheit</b></label>
     <div class="wrapper">
      <canvas id="Unterschrift_1" width="700" height="100
      </canvas>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

...zum Beitrag

Joomla! / Beez3-Template: Wie kann ich die Dimensionen des .logoheader in der CSS ändern?

Hallo,

folgende Daten sind derzeit in der in der personal.css hinterlegt:

.logoheader {
  background: url(../images/personal/personal2.png) no-repeat right;
  size:
  width: 100%;
  height: auto
  bottom #0C1A3E;
  color: #FFFFFF;
  height: 288px;
  max-height: 100%;
  width: 1030px;
  max-width: 100%;
  border-bottom: solid 1px #040404;
  border-top: solid 1px #040404;
  border-left: solid 1px #040404;
  border-right; soild 1px #040404;

Ich möchte erreichen, dass der .logoheader eine fixe Höhe und Breite hat und der Inhalt an dieses angepasst wird.

...zum Beitrag

WetterApp mit HTML, Css und C# über Blazor Server App?

Hallo undzwar bin ich neu in C# und möchte über die Blazor Server App eine Wetter-App programmieren, allerdings fehlt mir dazu noch der Code, da ich nicht weiß wie ich anfangen soll. Ich möchte dass mein "SearchIcon" welcher in HTML hinterlegt ist als suchbutton fungiert, damit ich die Städte suchen kann und über API möchte ich, dass mir dann die jeweiligen Temperaturen angegeben werden. Kann mir wer helfen und gegebenenfalls einen Code dafür geben.

Hier mein HTML code:

</div>

</div>

<div>

</div>

</div>

<img src="/images/image1.png" width="75" height="75" class="imageline "

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 22px; margin-right: -5px;"

<img src="/images/image1.png" width="75" height="75" class="imageline " style="margin-left: 5px; margin-right: -14px;"

</div>

<div>

<p style="color:black;"class="line0 title margin-left ">Monday</p>

<p style="color:black;"class="line0 title margin-left ">Tuesday</p>

<p style="color:black;"class="line0 title margin-left ">Wednesday</p>

<p style="color:black;"class="line0 title margin-left ">Thursday</p>

<p style="color: black;"class="line0 title margin-left ">Friday</p>

</div>

<div>

<p class="speed">Humidity</p>

</div>

<div>

<p class="speed">Wind Speed</p>

</div>

</body>

hier mein Css code:

.backgroundimage {

background-image: url('../images/sun_background.png');

background-attachment: fixed;

background-repeat: no-repeat;

background-size: cover;

}

.cloud-background {

background-image: url('../images/cloud.png');

/* Füge hier die gewünschten Hintergrundbilderigenschaften hinzu */

}

.card {

width: 90%;

max-width: 470px;

color: #fff;

margin: 10px auto 0;

border-radius: 20px;

}

.search{

width: 100%;

display: flex;

align-items: center;

justify-content: space-between;

}

.search input{

border: 0;

outline: 0;

background: #ebfffc;

color: #555;

padding: 10px 25px;

height: 60px;

border-radius: 30px;

flex: 1;

margin-right: 16px;

font-size: 18px;

}

.search button{

border: 0;

outline: 0;

background: #ebfffc;

border-radius: 60%;

width: 60px;

height: 60px;

cursor: pointer;

}

.weather-icon{

margin-bottom: -30px;

}

.weather h1 {

font-size: 80px;

font-weight: 500;

color: floralwhite;

}

.weather h2 {

font-size: 40px;

font-weight: 400;

margin-top: -10px;

color: floralwhite;

}

.details {

display: flex;

align-items: center;

justify-content: space-between;

padding: 0 20px;

margin-top: 50px;

}

.col {

display: flex;

align-items: center;

text-align: left;

margin-top: 150px;

}

.col img {

width: 20px;

margin-right: 20px;

margin-bottom: 70px

}

.humidity, .wind{

font-size: 28px;

margin-top: -6px;

color: floralwhite;

}

.speed{

font-weight: bold;

}

.temp {

margin-bottom: 20px;

display: flex;

justify-content: center;

}

.search button img{

width: 55%;

}

.center {

display: flex;

justify-content: center;

}

.top-left{

display: flex;

justify-content:left

}

.top-left

{

margin-left: 10px;

}

.margin-top{

margin-top: 20px;

}

.hr1 {

width: 390px;

height: 2px;

color: black;

}

.line{

margin-bottom: -100px;

margin-top: 10px;

}

.line1{

margin-top: 30px;

margin-bottom: -20px;

}

.line0{

margin-top: 70px;

margin-bottom: -90px;

font-size: 14px;

font-weight: bold;

color: black;

}

.imageline {

margin-top: 5px;

margin-bottom: -90px;

}

.imagesMain {

padding: 0;

margin-left: auto;

margin-right: auto;

margin-top: 20px;

text-align: center;

}

.imagesMain img {

height: 400px;

width: 300px;

vertical-align: middle;

}

.title {

display: inline-block;

color: lightgray;

}

.margin-left{

margin-left: 14px;

}

...zum Beitrag

HTML Input verdecken?

Hallo! Ich habe in HTML einen Input von Typ Text. Man sieht den Text, aber ich möchte, das man ihn angezeigt bekommt, als wäre es ein Passwort. Also mit *****.Ich kann aufgrund meines Javascript Codes ihn aber nicht als Typ Password(also <Input type="Password"> geht nicht) abspeichern. Kann ich den Text trotzdem irgendwie verdecken?

...zum Beitrag

Was möchtest Du wissen?

Deinen Beitrag erstellen