Is daar 'n maklike manier om html textarea en insette tipe teks ewe wye maak?

StackOverflow https://stackoverflow.com/questions/28713

  •  09-06-2019
  •  | 
  •  

Vra

Is daar 'n eenvoudige manier om 'n HTML textarea en 'n inset type = "text" te lewer met (ongeveer) gelyke breedte (in pixels), wat werk in verskillende blaaiers?

'n CSS / HTML oplossing sou briljante wees. Ek sou verkies om nie te hê om Javascript gebruik.

Dankie / Erik

Was dit nuttig?

Oplossing

Jy moet in staat wees om te gebruik 

.mywidth {
  width: 100px;   
}
<input class="mywidth">
<textarea class="mywidth"></textarea>

Ander wenke

Om die eerste vraag te beantwoord (alhoewel dit is nie tot die dood). A breedte CSS is wat jy nodig het

Maar ek wou beantwoord Gaius se vraag in die antwoorde. Gajus, jy probleem is dat jy die opstel van die wydte in em se. Dit is 'n goeie dink om te doen, maar wat jy nodig het om te onthou dat em se is gebaseer op lettergrootte. By verstek 'n inset area en 'n textarea het verskillende font gesigte en groottes. So wanneer jy die opstel van die breedte aan 35em, die insette area is met behulp van die breedte van sy skrif en die textarea is met behulp van die breedte van sy skrif. Die teks area verstek skrif is kleiner, dus die teks boks is kleiner. Óf stel die breedte in pixels of punte, of verseker dat insette bokse en textareas dieselfde font face & grootte: 

.mywidth {
  width: 35em;
  font-family: Verdana;
  font-size: 1em;
}
<input type="text" class="mywidth"/><br/>
<textarea class="mywidth"></textarea>

Hoop dit help.

Iemand anders het dit al, dan verwyder dit. As jy wil hê dat alle textareas styl en teks insette op dieselfde manier sonder klasse, gebruik die volgende CSS (nie werk in IE6): 

input[type=text], textarea { width: 80%; }

Dit is 'n CSS vraag: die breedte sluit die grens en padding breedtes, wat verskillende standaard vir insette en TEXTAREA in verskillende blaaiers het, so maak die dieselfde sowel: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>width</title>
<style type="text/css">
textarea, input { padding:2px; border:2px inset #ccc; width:20em; }
</style>
</head>
<body>
<p><input/><br/><textarea></textarea></p>
</body>
</html>

Dit word beskryf in die Box dimensies afdeling van die CSS spesifikasie, wat sê:

  

Die boks breedte gegee word deur die som van die links en regs marges, grens, en padding, en die breedte inhoud.

Gebruik CSS3 te maak teksboks en insette te werk dieselfde. Sien jsFiddle . 

.textarea, .textbox {
    width: 200px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

Ja, daar is. Probeer iets soos dit te doen: 

<textarea style="width:80%"> </textarea>
<input type="text" style="width:80%" />

Beide moet gelyk aan die dieselfde grootte. Jy kan dit doen met absolute groottes (px), relatiewe groottes (em) of persentasie groottes.

Net 'n nota - die breedte is altyd beïnvloed deur iets gebeur op die kliënt kant -. PHP kan nie hierdie soort van dinge te bewerkstellig

Die opstel van 'n gemeenskaplike klas op die elemente en die opstel van 'n breedte in CSS is jou skoonste weddenskap.

Gebruik 'n CSS klas vir breedte, dan plaas jou elemente in HTML divs, divs met die genoemde klas.

Op hierdie manier, die uitleg beheer algehele moet beter wees.

Soos genoem in Ongelyke Html teksboks en dropdown breedte met XHTML 1.0 streng dit hang ook af van jou DOCTYPE. Ek het opgemerk dat wanneer die gebruik van XHTML 1.0 streng, die verskil in wydte wel verskyn. 

input[type="text"] { width: 60%; } 
input[type="email"] { width: 60%; }
textarea { width: 60%; }
textarea { height: 40%; }

Deesdae, as jy bootstrap gebruik, eenvoudig gee jou insette velde die form-control klas. Iets soos: 

<label for="display-name">Display name</label>
<input type="text" class="form-control" name="displayname" placeholder="">

<label for="about-me">About me</label>
<textarea class="form-control" rows="5" id="about-me" name="aboutMe"></textarea>

Jy kan die volgende ook gebruik CSS: 

.mywidth{
width:100px;
}
textarea{
width:100px;
}

HTML: 

<input class="mywidth" >
<textarea></textarea>
Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top