CODEWITHSUNDEEP
csshtml-input
Rich Oliver
Rich Oliver

Reputation: 6109

CSS: size property in class for input tags

I have the following code:

<!doctype html>
<html>
<head>
  <title>Rich Home</title>  
  <meta charset="utf-8"> 
  <style>
    body { background-color: Black; color: White; }
    h1 {text-align: center}
    .st{ color: Green; background-color: Yellow; size: "80"; type:"text" }
  </style>    
</head>

<body>
  <h1>Rich's Home Page</h1>
  <form action="https://google.com/search" method="get">
    Google: <input class=st name="q" autofocus>
    <input type="submit" value="=>">
  </form>
  <form action="https://duckduckgo.com" method="get">
    Duck: <input class=st name="q">
    <input type="submit" value="=>">
  </form>  
</body>
</html>

I've opened in Firefox, Chrome and Chromium. Color and background-color are applied to the two input boxs, but size is not. Why is that?

Edit in response to various answers comments. using the following line instead has no effect:

.st{ color: Green; background-color: Yellow; width: "600px"; type:"text" }

Upvotes: 0

Views: 1868

Answers (3)

Anoop Nockson
Anoop Nockson

Reputation: 282

check this you can simply define class for other text types like "input[type="number"] "

input[type="text"] {
  display: block;
  margin: 0;
  width: 60%;
  font-family: sans-serif;
  font-size: 25px;
  appearance: none;
  box-shadow: none;
  border-radius: 5px;
}
input[type="text"]:focus {
  outline: none;
}
<input type="text" placeholder="name" />

Upvotes: 0

Eldo.Ob
Eldo.Ob

Reputation: 794

The attribute "size" doesn't exist in CSS, you have to specify width and height .st{ color: Green; background-color: Yellow; width: 80px; type:"text" }

should work.

Upvotes: 0

vovchisko
vovchisko

Reputation: 2229

There is no "size" property in CSS. It is tag attribute. If you want to specify width or height of element using CSS - use:

.st {
    width: 80px;
}

AND you can't set element type using CSS. Set attributes instead:

<input class=st name="q" type="text" autofocus>

ALSO you can you can specify width with attribute:

<input class=st name="q" type="text" width="50" autofocus>

Upvotes: 2

Related Questions