Can't Style Text on Input Submit Button as Bold

Can't style text on input submit button as bold?

Are you using chrome for a MacOS? If so, try adding a background-color to the button to see if it fixes it. The default Aqua styles might be interfering. You can also try -webkit-appearance: none; or -webkit-appearance: button;.

How to make the text in the button bold?

You've placed bold in your comma-separated list of font names, so if there isn't a generic sans-serif font available it will look for one named bold.

See the documentation for font. Order matters.

Put bold at the front of the list of properties in the shorthand.

.auth_subm {

  height: 20pt;

  width: 130pt;

  font: bold 10pt Arial, Helvetica, sans-serif;

  margin: 2pt;

  margin-right: 0px;

  text-align: center

}

<input value="how get answers" type="button" onclick="location.href='otv.html'" class="auth_subm" />

Submit button value not changing with css

If you don't specify the font-weight, it assumes 400.

Fonts that provide a light variant, usually require 100/200 (numbers by experience, not spec). Bold is typically 600, and extra bold is usually 900.

Instead of numbers, try using one of the words from the font-weight spec, which include normal (400), bold (700), or lighter. If you specify lighter and the font-weight would be 500 or less if unspecified, it will be treated as 100 or light weight.

Or use the value 100 which is the lightest font of the family, that's available.

Limitations:

If the user has no light font for the font-family, it will default to the lightest (usually the same as normal).

Input button can't unbold text

I found the fix.

input{
    -webkit-font-smoothing: antialiased;
}

You need to add -webkit-font-smoothing: antialiased; to the input.

If you've added this to the html or body element, this rule will work on every element on the page except for inputs, so you need to redeclare it.

Bold text in the from field: input ?

CSS can format text in text input field:

<html>
<head>
<style type="text/css">
   input {font-weight:bold;}
</style>
</head>
<body>
   <input type="text"/>
</body>
</html>

Just trying to give a bold font to an input text

Your <style> should be in the <head> section:

<html>
 <head>
  <style type="text/css">
   .jander2{
     font-weight: bold;
   }
 </style>
 </head>
 <body>
  <form method="post" action="somepage">
   <input id="jander" class="jander2">
  </form>
 </body>
</html>

EDIT: To satisfy the commenter: use only standard double quotes, no curly special quotes as you had in your <style> tag.

Making a text bold using DOM Events

The problem is you are changing the input.value to bold. You can't style the input.value you should directly change the input style.

Also, you can't use the input.value = it is not built-in function like toUpperCase, it is style.

Use input.value.style.fontWeight may work, but you need to apply it back which click on other element which is messy. The easiest way is to <b> so you don't have to worry to change it back.

Also, I problem I have to mentioned, you should declare the input value inside the function, you declare it at the beginning which will always be empty since you assign the value at page loading.

let text = document.getElementById("text")
let input = document.getElementById("type")
let button1 = document.getElementById("button1")
let button2 = document.getElementById("button2")
let button3 = document.getElementById("button3")
let button4 = document.getElementById("button4")

button1.onclick = uppercase
button2.onclick = lowercase
button3.onclick = bold
//button4.onclick = italic

function uppercase() {
let value1 = document.getElementById("type").value
  text.innerHTML = value1.toUpperCase()
}

function lowercase() {
  text.innerText = input.value.toLowerCase()
}

function bold() {
  text.innerHTML = '<b>'+input.value+'</b>'
}

<p id="text">Escreva seu texto abaixo</p>

<div id="container">
  <input type="text" id="type">
</div>
<main>
  <ul>
    <li class="buttons">
      <button id="button1">A</button>
    </li>
    <li class="buttons">
      <button id="button2">a</button>
    </li>
    <li class="buttons">
      <button id="button3">B</button>
    </li>
    <li class="buttons">
      <button id="button4">I</button>
    </li>
  </ul>
</main>

Can't Style Text on Input Submit Button as Bold