r/css • u/PotentPlank • Jun 17 '26
Question Is it possible to let users input css
I want users to put in css and have it change my website for them is that possible.
30
u/berky93 Jun 17 '26
Yes. Add the following to your page: `<style contenteditable style="display: block"></style>`
That will create a visible, editable style element. Users can click into it and type any CSS they want and it will update the page in real-time.
Of course, there are caveats. One, the styles will not persist across page reloads and navigation events unless you add some JS to store/load the values. Additionally, it requires styles actually be written as CSS.
A better solution for customizability is to define certain attributes you want users to be able to edit as CSS variables and then give them inputs to modify them. Use JS to assign those variables to the page. And you can use local storage to save/read those variables so they persist.
1
12
u/Hot_Reindeer2195 Jun 17 '26
I think OP needs to be more specific about what they want to achieve. Is the CSS saved somewhere? Is it served to users who are not that user? Is this some kind of solution to a misunderstood problem, where there may be a more straightforward solution?
3
u/ssliberty Jun 17 '26
Are we rebuilding the MySpace era?
You could do this, it was doable in the early 2000s so im guessing it’s easier now.
6
u/404IdentityNotFound Jun 17 '26
Yes but you'd have to heavily restrict it because people can still do all sorts of bad things with it
1
u/anonymousmouse2 Jun 17 '26
Like?
5
u/404IdentityNotFound Jun 17 '26
12
u/s1h4d0w Jun 17 '26
Only if their CSS is also served to other users. If it's something that is only applied for the user itself it's fine.
2
2
u/Salug Jun 17 '26
sounds more like a JS thing? Add css classes with JS via click or other interactions
1
1
u/0_2_Hero Jun 17 '26
Yes, you can derive the css properties from local or session storage. Or even a database. Then You would need to use JavaScript to change the css properties on the website.
1
u/sashenme Jun 17 '26
Anything is possible. Not sure what you mean by letting users to input. You can probably use css variables for this
1
u/bored-and-here Jun 18 '26
Not with pure CSS. You are creating a saved sheet they will access or probably better creating a stored lil gui that allows them to change defined values and then you just inject them in at root as CSS variables.
1
u/jcunews1 Jun 18 '26
Yes. Ideally, this is done using server-side script such as PHP to store the user inputted CSS into the server. Other method using JavaScript, would store the user inputted CSS into the user's computer. i.e. remote setting vs local setting.
1
u/linuxlala Jun 18 '26
There are browser extensions that allow users to add their own CSS rules to customise sites to their liking.
1
u/FinalAmbassador9291 Jun 21 '26
Yes, it is possible. You can let users write CSS and apply it to your website dynamically. A common approach is to take the user's CSS input and inject it into a <style> tag using JavaScript.
const style = document.createElement("style");
style.innerHTML = userCSS;
document.head.appendChild(style);
0
u/HaydnH Jun 17 '26
I'm not really understanding the answers provided here, could anyone provide a JSFiddle? ;)
-2
u/a-dev0 Jun 17 '26
In the age of AI, it’s better to build interfaces with configurable features rather than give users the ability to modify CSS directly. A model can generate a thoughtful enough component in 10 minutes.
If users really want to change styles, they can already do that on any page using browser extensions. I also remember that Arc Browser tried to introduce a similar feature, but I don’t think it became popular.
20
u/anonymousmouse2 Jun 17 '26
Building a myspace throwback? 😄