function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
KevinsanKevinsan 

Don't want to display the increase/decrease bar in InputField with type="number"

I don't want to display the increase/decrease bar(the red square in the image) in InputField with type="number"
User-added image 
<apex:page showHeader="false" standardController="Account" docType="html-5.0">
    <apex:form >
    	<apex:pageBlock title="Test InputField">
            <apex:inputField value="{! Account.Name }"/><br/>
            <apex:inputField type="number" value="{! Account.NumberOfEmployees }"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

 
Best Answer chosen by Kevinsan
Raj VakatiRaj Vakati
<apex:page showHeader="false" standardController="Account" docType="html-5.0">
    <style>
        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0; 
        }
    </style>
    <apex:form >
        <apex:pageBlock title="Test InputField">
            <apex:inputField value="{! Account.Name }"/><br/>
            <apex:inputField type="number" value="{! Account.NumberOfEmployees }"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

 

All Answers

Raj VakatiRaj Vakati
<apex:page showHeader="false" standardController="Account" docType="html-5.0">
    <style>
        input[type=number]::-webkit-inner-spin-button, 
        input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        margin: 0; 
        }
    </style>
    <apex:form >
        <apex:pageBlock title="Test InputField">
            <apex:inputField value="{! Account.Name }"/><br/>
            <apex:inputField type="number" value="{! Account.NumberOfEmployees }"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

 
This was selected as the best answer
KevinsanKevinsan
Thank you Raj V!
jane1234jane1234
Hi Kevinsan,
you can try the below code.

<apex:page showHeader="false" standardController="Account" docType="html-5.0">
    <apex:form >
        <apex:pageBlock title="Test InputField">
            <apex:inputField value="{! Account.Name }"/><br/>
            <apex:inputField type="number" value="{!Account.NumberOfEmployees }"/>
        </apex:pageBlock>
    </apex:form>
    <style>
        input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
    </style>
</apex:page>
KevinsanKevinsan
Thanks seethal pius!
And I have another question. How can I limit the input with only 2 numbers?
jane1234jane1234
YOU CAN LIMIT THE NUMBER LENGTH TO 2   IN SALESFORCE