How to change the value of a button through CSS


So here's the code:

<form id="my-button" action="#" method="post"> <input type="submit" name="sample-button" value="Hello"> </form>

I need to be able to change the value through CSS. No clicking or hovering. Just need to replace it through CSS.

I tried doing this, but it's not working.

#my-button input[type=submit]:before{ content:""; } #my-button input[type=submit]:after{ content:"HI"; }


If you want it for display/appearance purposes, you can try something like this, <strong>using pure css</strong>:

<a href="http://jsfiddle.net/2Lp2j12d/" rel="nofollow">Example in JSFiddle</a>

it won't change the actual submit's value, but for display purposes it works fine.

<pre class="snippet-code-css lang-css prettyprint-override">input[type=submit] { color: transparent; } #my-button { display: inline-block; position: relative; } #my-button:after { content: "World"; position: absolute; display: block; color: black; top: 1px; left: 1px; pointer-events: none; } <pre class="snippet-code-html lang-html prettyprint-override"><form id="my-button" action="#" method="post"> <input type="submit" name="sample-button" value="Hello"> </form>


That really isn't what CSS is for.

CSS is for styling your content; HTML is for the actual content itself.

If you need to modify the content after the HTML has loaded, then that's what Javascript is for.

So the real answer to your question is: either modify the HTML directly, or use Javascript. you can use

$(document).ready(function() { $("#my-button input").val("Hi"); });


1) You can't just "change" some values with css. You can do something on events like :hover/:focus, but you can't affect elements like it's javascript.

2) :before and :after are individual elements inside parent element, which are NOT the same as your element.

3) And most important part - input element CAN'T have :before/:after elements.

4) You need access to html/js if you want to change anything.


  • Do word boundaries work on symbol characters?
  • PHP split array based on value [duplicate]
  • Content Security Policy Internet explorer error
  • Use pnorm from Rmath.h with Rcpp
  • What is the Performance, Safety, and Alignment of a Data member hidden in an embedded char array in
  • Bundled scripts not working MVC
  • Make label participate in control tabbing
  • How to style GCKUIMiniMediaControlsViewController in iOS?
  • css Star-rating html
  • respondsToSelector - not working
  • Difficulties implementing the Hysteresis step of Canny Algorithm in Halide without define_extern fun
  • Using Python objects in C++
  • How to align an image side by side with a heading element?
  • CSS how to fix an element to scroll horizontally with the page but not vertically?
  • Scanner nextInt() and hasNextInt() problems
  • ThreadStatic in asynchronous ASP.NET Web API
  • SAXReader not re-ecape characters
  • Why use database factory in asp.net mvc?
  • How to get current document uri in XSLT?
  • Adjust width of select element according to selected option's width
  • Checking free space on FTP server
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Modifying destination and filename of gulp-svg-sprite
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • R: gsub and capture
  • AT Commands to Send SMS not working in Windows 8.1
  • Unanticipated behavior
  • Traverse Array and Display in markup
  • Matrix multiplication with MKL
  • WPF Applying a trigger on binding failure
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to set the response of a form post action to a iframe source?
  • Hits per day in Google Big Query
  • Change div Background jquery
  • File not found error Google Drive API
  • Converting MP3 duration time